Fix: Mobile layout broken on game-room page #60

[Zaki-Mohd]

Fix: Game room page mobile responsiveness (#60)

📝 Description

This PR addresses the mobile layout issues on the /game-room page. The previous three-column layout was not responsive, causing elements to overlap, misalign, and become unusable on small screens.

This fix implements a mobile-first, fully responsive design that stacks vertically on mobile devices and gracefully transitions back to the original three-column layout on desktops.

✨ What's Fixed

• The rigid three-column layout now stacks into a single, scrollable column on mobile devices.
• Content is re-ordered for a better mobile user experience: 1. Game Area, 2. Guess Box, 3. Leaderboard.
• Eliminated overlapping elements, ensuring all buttons, text, and inputs are fully visible and interactive.
• Adjusted font sizes, padding, and margins to be adaptive to different screen sizes.

🛠️ How This Was Achieved

• Converted the main container to use a flex-col layout by default, switching to lg:flex-row on large screens.
• Used Tailwind CSS order-* utilities to change the visual sequence of the columns on mobile without altering the DOM structure.
• Replaced individual horizontal margins on the columns with a single lg:gap-x-* on the parent container for clean, consistent spacing on desktop.
• Applied responsive prefixes (lg:, sm:) to widths, padding, margins, and font sizes.

📸 Before & After Screenshots

Before (Mobile View):
Elements are overlapping and misaligned, making the page unusable.

After (Mobile View):
The layout is now stacked, aligned, and fully interactive.

🧪 How to Test

1. Navigate to the /game-room page.
2. On a desktop, confirm the original three-column layout is unchanged.
3. Shrink the browser window or use developer tools to simulate a mobile device.
4. Verify that the layout stacks into a single vertical column.
5. Ensure there is no horizontal overflow and all elements are readable and clickable.

Related Issue

Closes #60