Bug Report 🐛

The Playground Learn Page Layout for Mobile Screens is to disturb because of the flex

Current Behavior

On mobile screens, the following issues are observed:

• The sidebar takes up too much space, leaving the content area cramped.
• Navigation buttons (e.g., Previous, Next) are partially hidden due to limited width.
• The content appears misaligned and requires unnecessary scrolling.

Affected Devices

• Samsung Galaxy Z Fold 5
• Samsung Galaxy S20 Ultra
• Google Pixel 6 Pro
• iPhone 13 Pro Max
• OnePlus 9 Pro
• Xiaomi Mi 11 Ultra

Screenshots

Expected Behavior

• The Playground Learn Page should have a responsive layout on mobile screens.
• The sidebar and content should adapt properly to smaller viewports.
• Navigation buttons should be fully visible without being cut off.

Possible Solution

• Use CSS media queries to adjust the layout based on screen size.
• Apply flex-direction: column on smaller screens to stack the sidebar and content vertically.
• Ensure the navigation buttons remain fully visible and properly aligned.
• Add consistent padding and spacing for better readability on mobile screens.

Steps to Reproduce

1. Open the Playground Learn Page on a mobile device or resize the browser to a smaller viewport.
2. Observe the sidebar and content layout.
3. Notice the cut-off navigation buttons.
4. Confirm the cramped appearance of the content section.

Related Issue

• PR fix(layout): padding issues on mobile devices for Main Page, Template Preview, and Footer  #329
• This may be useful for transforming the page layout

Detailed Description

The Playground Learn Page layout needs better responsiveness on mobile devices.
By using CSS media queries, the sidebar and content can stack vertically on smaller screens, ensuring a consistent and user-friendly experience.

@DianaLease @sanketshevkar , if this is a notable and seems beneficial for Template Playground Users, I would be happy to take on this task. Please assign this issue to me @sahilkhan117 . Looking forward to your feedback!