fix(dashboard): mobile responsive fixes across sidebar, home, project, emails, deployments - #359
Open
DiogoDuart3 wants to merge 11 commits into
Open
fix(dashboard): mobile responsive fixes across sidebar, home, project, emails, deployments#359DiogoDuart3 wants to merge 11 commits into
DiogoDuart3 wants to merge 11 commits into
Conversation
At narrow widths the sidebar never collapsed - it rendered inline and squeezed page content to roughly half the viewport instead of getting out of the way. Below `lg` it's now hidden by default and opens as an overlay drawer (fixed position, slide-in, scrim) via a hamburger button in a new slim mobile top bar (logo + hamburger + theme toggle). The drawer auto-closes on navigation and locks page scroll while open. Desktop sidebar behavior (collapse/expand, width) is unchanged.
… chips Two mobile layout bugs on the deployments list: - The project title truncated with `truncate` but no `min-w-0` on the flex item, so its min-content stayed the full untruncated text width - it refused to shrink and spilled across the status badge / commit hash instead of ellipsizing. The commit-hash + menu block now also stacks onto its own row below `sm` instead of sharing the row it used to overlap into. - The status filter chips (All/Success/Failed/...) wrapped to a ragged second line on narrow screens; they now scroll horizontally in a single row instead. Desktop layout is unchanged (sm+ reverts to the original row).
…ding - Define the `.scrollbar-hide` utility that ProjectMobileTabs and the shared Tabs component both already referenced but that never actually existed - Firefox (which doesn't honor the app's global ::-webkit-scrollbar rule) was showing a bare scrollbar under every horizontal-scroll tab strip in the app. - Add fade edges to the project detail mobile tab strip so the horizontal scroll reads as intentional instead of a hard content cut. - Infrastructure/Source card rows (Server, Repository, and the shared Item row used for Platform/Mode/Port/Branch) stack label above value below `sm` instead of cramming both onto one line - on a narrow viewport a long repo slug or server name has no room next to its label and was overflowing past the truncate boundary because the value span was missing `min-w-0` (a flex item with `white-space: nowrap` keeps its full text width as its shrink floor unless told otherwise, so `truncate`'s max-width never actually kicked in).
- The "Add mail server" header button had no `whitespace-nowrap` and competed with an untruncated title block for space, so on a narrow viewport its label wrapped across three lines. The title now truncates, the button is pinned to one line, and its label collapses to icon-only below `sm` (the icon + tooltip stay meaningful on their own; the full label comes back once there's room). - The 10-tab admin nav (Overview...Advanced) already scrolled horizontally but gave no visual hint that there was more off-screen - added the same fade-edge treatment as the project detail tab strip. - The reputation warm-up banner gets an explicit `w-full` and slightly tighter mobile end-padding so it doesn't read as a squeezed column next to its own dismiss button.
…g label
- The project row's name+domain column was a fixed w-44 (176px) at every
width below lg, which left too little room for the rest of the row on
a phone-width viewport and pushed the row wider than the screen -
the domain line rendered past the visible edge rather than actually
truncating in view. It now steps down to w-32 below sm.
- The hosting-target label (e.g. a server name) was capped at
max-w-[120px], truncating mid-word ("Unkn...") even at desktop widths
where the row has spare room; widened to 160/220px.
Regression from the earlier mobile pass: widening the hosting label's max-width to fix one truncation bug pushed the row's total shrink-0 badge content past the available width at other viewports (reported at 1280px desktop, "This Server" clipped to "Thi"). The row's overflow-hidden clips at the box edge, not per-badge, so whichever badge landed on that boundary got a raw pixel cut instead of an ellipsis - same mechanism was clipping "Unknown" to "Unkno" on mobile. Fixed at the source instead of re-tuning another magic max-width: the icon is always visible (with a title tooltip standing in for the label on narrow/icon-only sizes), and the label text only renders as a DOM node from md up - hidden removes it from layout rather than shrinking it, so it can't contribute a partial-width clip, and once visible it's unclamped so it can't cut mid-word either.
The h1 and the env selector/help menu shared one row, so on a
phone-width viewport the heading truncated ("Overview" -> "Overv...")
to make room for the controls. Stacks below sm now: heading gets its
own full-width line, controls wrap to a second row. Unchanged at sm+.
The hostname (break-all, wraps to 2 lines on a long domain) and the Open webmail / Deploy webmail button shared one row via flex-wrap, which read as an overlap once the hostname wrapped on a narrow viewport. The CTA now stacks onto an explicit second row below sm instead of relying on wrap to reflow it. Unchanged at sm+. The secondary "Webmail at ..." line (same break-all treatment) already sits below the hostname within the same column, so it benefits from the same fix without further changes.
The commit hash rendered as a padded pill button sharing a separate stacked row with the menu button on mobile, reading as loose and disconnected from the rest of the row's metadata. It now renders inline in the time/message row as plain muted mono text (matching that row's existing dot-separated rhythm) below sm; the desktop pill next to the menu is unchanged above sm.
…dge clip
F1 regression follow-up: unclamping the hosting label at md+ (previous
commit) still wasn't safe - the home row shares its column with the
right-hand Activity/Updates sidebar, so even at 1280px desktop the
track available to Stack+Hosting+Source+Build-target together is
narrower than the raw viewport suggests, and the row's overflow-hidden
hard-clips at the box edge once real content (e.g. "This Server")
exceeds it, regardless of breakpoint. Verified via headless screenshot
(login + DOM/computed-style inspection) at both 1280 and 390 this
time, not just at the source level. Hosting badge is icon+tooltip only
now, at every width - no label text means no possible partial-width
clip.
Also caught, via the same visual pass, that the Stack badge ("Unknown"
etc.) has the identical failure mode and was clipping to "Unkr" at
390px - same fix (min-w-0 + truncate + max-w on the inner text) applied
there.
F2: favicon fallback now also handles a URL that 200s with an empty
body (seen on Faltou - content-length: 0), which resolves as
`complete=true` with naturalWidth 0 without reliably firing onLoad/
onError before React's listeners attach. A post-mount check via ref
catches it and falls back to the initial-letter avatar.
…90px
Measured the real page at exactly 390x844: after the mobile name
column (w-32) and the trailing Live-badge+arrow block, the meta-badges
row has ~35px of actual width - not enough for the Stack pill (~67px)
even with the min-w-0 + truncate fix from the previous pass, so the
row's overflow-hidden was still hard-clipping it ("Unknown" -> "Unkr")
regardless. Hidden below sm now, same reveal pattern as Source (md)
and Build target (lg) further down the row - Hosting (icon-only) is
the only thing that actually fits in that space at 390px. Verified via
headless screenshot + getBoundingClientRect at exactly 390x844 before
deploying.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A batch of small, independent mobile-responsive fixes across the dashboard, verified live via a headless screenshot pass at 390px and 1280px before/after each change.
lg(was always fixed-position, unusable on narrow viewports) - adds a mobile top bar with an open/close trigger.sm- it never actually fit at 390px.Note on CI
Recent merged PRs against
main(#322, #327) showTypecheck: SUCCESS/Test: FAILUREon their PR-context runs. Flagging in case it reproduces here too - doesn't look related to this change.