fix: overhaul mobile responsiveness, light mode, and svg visibility

[Krasper707]

Description

This PR addresses several UI/UX bugs identified in the frontend (index.html) to improve accessibility and user experience across different devices and themes:

• Mobile Responsiveness: Fixed a grid stacking issue where panels would overlap on small screens. The workspace now stacks vertically on screens smaller than 900px.
• Theme Consistency: Enhanced the "Light Mode" implementation. Previously, only the navbar toggled; now, the entire application body and panel containers respect the theme switch.
• Icon Visibility: Forced SVGs/Icons to inherit theme colors with improved stroke contrast to ensure they are clearly visible in both Dark and Light modes.
• UI Alignment: Fixed the "CODE EDITOR" header text wrap and status dot alignment for a cleaner, professional look.
• Accessibility: Added aria-label attributes to the editor action buttons (Upload, Clear, Copy) for screen reader support.

Related Issue

Fixes #433

Type of change

• Bug fix
• New feature / enhancement
• Documentation update
• Test addition
• Refactor

Checklist

• I have read CONTRIBUTING.md
• My branch is up to date with main
• I have run pytest -v and all tests pass
• I have not introduced duplicate issues or features
• My PR title follows the format: fix: improve mobile responsiveness and theme consistency
• I have added tests for new features (Visual verification performed for CSS changes)
• No hardcoded secrets or API keys in my code
• This PR is linked to a GSSoC 2026 issue

Screenshots (if frontend change)

Before:

After:

[imDarshanGK]

@Krasper707 update your branch with the latest main changes, issue number?

[Krasper707]

Done! I've synced the branch with upstream/main and updated the description to include 'Fixes #433 '.