Improve mobile responsiveness of editor and action buttons

[imDarshanGK]

Tweak frontend styles so the code editor and buttons render well on <= 480px screens. Add a responsive test to CI.

[Sujata005]

Hi 👋 I’m a GSSoC 2026 contributor and would like to work on this issue.
Please assign this issue to me .

[Bhagyashri77777]

Hi @imDarshanGK 👋

I’d like to work on this issue under GSSoC’26.

I checked the current frontend layout on smaller screens and I think the editor section and action buttons can be improved significantly for better usability on mobile devices (especially <=480px widths).

My planned approach would be:

• Refactor the editor/action section layout using responsive flex/grid behavior for smaller breakpoints

• Improve button wrapping, spacing, and alignment so action controls remain accessible without overflow or horizontal scrolling

• Optimize editor sizing and padding for compact mobile screens

• Add responsive media queries specifically for <=480px devices while preserving the current desktop layout

• Ensure touch-friendly interaction areas for mobile usability

• Test responsiveness across multiple viewport sizes using browser dev tools

• Add/update a lightweight responsive frontend test in CI to prevent future layout regressions

I’ll keep the implementation minimal, clean, and consistent with the current UI design system without introducing unnecessary frontend dependencies.

I’d love to contribute to this enhancement. Thank you!
PLEASE ASSIGNED IT TO ME

[shreyaundage]

@imDarshanGK I reviewed the issue and understand the required responsive improvements for the editor and action buttons on screens <= 480px, along with adding the corresponding responsive test to CI.

I'm confident I can work on this and ensure the UI remains clean and usable across mobile devices. Please assign this issue to me.

[Yukta015]

Hi @imDarshanGK

I would love to work on this issue! I've analyzed the frontend/style.css file and identified the layout problem on smaller viewports.

Here is my approach to solve this-

• Add a media query targeted at @media (max-width: 480px).
• Update the layout containers for the code editor and action buttons to switch from a horizontal row to a vertical stack using flex-direction: column.
• Adjust widths, margins, and padding to ensure no elements clip or overflow on mobile screens.

Could you please assign this issue to me? Thank you!