Fix/mobile responsiveness

[scytherswings]

Fix: Dashboard Mobile & Tablet Responsiveness

Problem

The Serena dashboard was completely broken on any screen narrower than 1280px. A single CSS rule — min-width: 1280px on the
#frame container — forced horizontal scrolling at all smaller widths and silently disabled every responsive media query in the
stylesheet. Additionally, the platinum banner was embedded inside the header's flex layout, causing cascading sizing and
overlap issues at mid-range viewports.

Changes

Root cause fix

• Removed min-width: 1280px from #frame, enabling all responsive breakpoints to actually fire

Header layout

• Header collapses to a compact column layout at ≤768px with height: auto so it sizes naturally
• Logo scales down to 100px tall on mobile (was inheriting the full 150px desktop value)
• Removed a pre-existing body { padding-top: 140px } that assumed a fixed/sticky header (the header is neither — it was
  creating a large blank space at the top of the page on mobile)
• header-nav and header-left set to height: auto at mobile so they don't try to fill the desktop height

Breakpoints

• 1024px: overview grid collapses to single column; stat tool name and config grid label column widths reduced for tablet
• 768px: full mobile column layout, compact logo, log container height recalculated
• 480px (new): tighter padding for small phones

Platinum banner

• Moved out of the header entirely into its own .platinum-banners-row div between the header and main content
• Capped at max-height: 156px with overflow: hidden so it can't blow out on large screens
• Images get max-width: 100% to prevent async-loaded content from overflowing the container

Gold banners ("Support Serena")

• Restored to original location in overview-right — no functional changes

Testing

Open the dashboard and use browser DevTools responsive mode at:

• 1024px — overview collapses to single column, no horizontal scroll
• 768px — header stacks vertically, compact logo, banner below header
• 480px — padding tightens, no overflow
• 375px — no horizontal scrollbar at any point

BEFORE:

AFTER:

For context, I have no interest in spending more time redesigning the UX, I would recommend considering a redesign of the CTA for support and making a carousel or two column layout underneath the navbar for your announcements/notifications/banners. Right now it feels awkward on desktop but I don't have have more time to spend.

[opcode81]

Thanks for your efforts, but on on desktop, the platinum banner now renders below the header section even though there is enough space. This unnecessarily wastes vertical space.

[opcode81]

@scytherswings so you don't want to improve upon your solution?

[scytherswings]

@opcode81 I probably should have opened this as an issue not a PR since it involves design. I burned an hour of my time iterating through various approaches already this morning to land back at this simple tweak, if this is something that ya'll are interested in please carry forward, but I don't have any more time to spend on UX, sorry, I'm a backend dev mostly.

See my original suggestions:

For context, I have no interest in spending more time redesigning the UX, I would recommend considering a redesign of the CTA for support and making a carousel or two column layout underneath the navbar for your announcements/notifications/banners. Right now it feels awkward on desktop but I don't have have more time to spend.

[opcode81]

Makes sense. Personally, I won't be exploring this further, because lower resolutions are unlikely to be relevant in the majority of usage scenarios. After all, developers are typically working in desktop environments with at least 1080p. Hence my decision to limit it to 1280 for the sake of simplicity.

[scytherswings]

I work on a macbook pro and had serena's dashboard side-by-side with my terminal while trying to troubleshoot it and get it set up, thus this work, but I get it.