🚀 Enhancement Request

Is your enhancement request related to a problem? Please describe.

The current UI layout relies heavily on fixed pixel values and restrictive viewport units, which causes inconsistent and sometimes broken appearance when the browser window is resized (ex:split screen view ).

Describe the solution you'd like

Replace most fixed sizing with more flexible, relative, and adaptive units to make the layout feel natural and consistent across typical desktop window sizes and resolutions.

Small, non-breaking changes I propose:

• Use rem / em or % instead of hard px for paddings, margins, and most widths
• Replace restrictive max-width: 20vw with sensible min-width + max-width values (e.g. min-width: 220px; max-width: 400px; width: 100%;)
• Add flex-wrap: wrap to major flex containers
• Use height: auto or max-height: 80vh instead of fixed 87vh where possible

and that will improve usability on laptops, split views, various screen resolutions.

Describe alternatives you've considered

• Doing nothing → current fixed sizing continues to cause poor experience on resized/narrow windows
• Full mobile-first responsive redesign → overkill for this project (primary use-case is desktop debugging sessions)
• Using a CSS framework (Tailwind, Bootstrap, etc.) → would be heavy and against the current lightweight approach
• Only changing one component → partial fix; better to apply consistent pattern across main layout containers

The proposed changes are minimal, backward-compatible, and focused on desktop usability improvement.