Bug: Responsive Layout Breaks on Certain Mobile Screen Sizes

[codedbydollys10]

Description

The application layout renders correctly on some mobile device dimensions (example: Samsung Galaxy S8+), but breaks or displays improperly on other mobile screen sizes.

Issues observed include:

• Extra black/empty space on the side
• Horizontal overflow
• Layout not fully utilizing screen width
• Preview/editor sections misaligned on smaller devices
• Inconsistent responsive behavior across devices

The issue appears to be related to fixed widths/heights or improper responsive flex/container handling.

---

Steps to Reproduce

1. Open the application in Chrome DevTools

2. Enable Device Toolbar

3. Test multiple mobile screen sizes:

   • iPhone SE
   • iPhone 12 Pro
   • Galaxy Fold
   • Pixel 7
   • Samsung Galaxy S8+

4. Observe layout behavior across devices

---

Expected Behavior

The application should:

• Adapt properly to all mobile screen sizes
• Avoid horizontal scrolling
• Use full available screen width
• Maintain proper alignment of editor and preview sections

---

Actual Behavior

On certain mobile resolutions:

• Layout overflows horizontally
• Empty/black space appears
• Containers do not resize correctly
• Responsive structure becomes inconsistent

---

Possible Root Causes

• Fixed width containers (px values)
• Improper flexbox sizing
• Missing min-width: 0 in flex children
• Usage of 100vw causing overflow
• Mobile viewport height inconsistencies (100vh)
• Missing responsive breakpoints

---

Suggested Investigation Areas

• Responsive container widths
• Flexbox layout behavior
• Media queries
• Mobile viewport handling
• Overflow management
• Editor/preview panel responsiveness

---

Screenshots Attached

Please assign this issue to me under gssoc'26 so i can resolve it and send u a PR asap.

[codedbydollys10]

/assign