To demonstrate the issue I am facing, I have created a code sandbox. You can access it by clicking here.
When there is ample space to display all columns, the table looks like this: https://i.sstatic.net/ZOtu8.png
However, when there isn't enough room for the full width, the table appears as shown in this image: https://i.sstatic.net/72zXd.png
In this scenario, scrolling to the right allows access to spell slots 8 and 9, but the left side cuts off class levels and proficiency bonus columns. My goal is to ensure that all columns remain visible without being cropped out. Any suggestions on how I can achieve this seamless scroll functionality?