Tabs Not Clickable on Smaller Screens

[YuxinZhang214]

Describe the bug
On smaller screens, the clickable tabs in the Create page cannot be selected due to responsive design issue.

To Reproduce
Steps to reproduce the behaviour:

1. Open the application in a web browser and adjust the window size to emulate a smaller screen or use the device toolbar in developer tools to emulate a mobile device.
2. Go to Create Page
3. Notice that the tabs are out of the screen

Expected behaviour
The application should be responsive, and elements should adjust correctly to accommodate smaller screen sizes.

Actual behaviour
Elements are not adjust correctly to accommodate smaller screen sizes.

Suggested Solution
This problem likely lies within the CSS or UI framework used for styling the tabs. We should review the styling rules for these elements and ensure they are responsive.

Screenshots

Environment

• OS: macOS Ventura 13.2.1
• Browser: Chrome 115.0.5790.114
• Node.js version: v16.17.1

[ozgurakgun]

@YuxinZhang214 has a fix that uses dropdowns instead.