fix(mobile): mobile hubbar overflow and card sheet#37
Merged
Conversation
… screen 1. Lesson #hubbar used a fixed -1.6rem horizontal margin while .wrap padding is clamp(1rem,4vw,1.6rem) = 1rem on phones, so the full-bleed bar stuck out 0.6rem past each edge and the whole page scrolled left/right. Make the negative margin track the same clamp so the bar full-bleeds exactly to the viewport at every width. 2. Hub card-detail sheet (<dialog>) on mobile had no overall height cap (only the inner list did), so it filled ~90vh and left almost no backdrop to tap — making it feel full-screen and hard to dismiss. Cap the sheet at 50vh with the inner list at 30vh; the existing e.target===sheet handler then has a large, tappable backdrop to close on outside click.
Remove the backdrop-click handler so an accidental tap outside the card sheet can't dismiss it. It now closes only via the ✕ button or Esc (Esc is native to dialog.showModal()). The 50vh mobile cap stays so the sheet never fills the screen.
Three card / sheet UX fixes on the hub: - .tile now has cursor:pointer so the whole card reads as a clickable zone. - Lock background scroll while the card sheet is open (set documentElement overflow:hidden on showModal, restore on the dialog close event — covers both the ✕ button and Esc). - ✕ close button hover is now clearly visible (amber-soft fill + on-accent text with a short transition) instead of the near-invisible --line tint.
…mobile On mobile the whole sheet scrolled because the dialog itself had overflow:auto. Make .cs-inner a flex column and .cs-lessons the single flex/scroll region; on mobile the dialog is display:flex + overflow:hidden capped at 50vh, so the header and footer stay fixed and only the lesson list scrolls — matching the desktop behaviour.
…:flex to [open])
The mobile media query set dialog.cardsheet{display:flex} unconditionally,
which overrode the UA dialog:not([open]){display:none}. So tapping ✕ (or
Esc) removed the backdrop but left the sheet itself visible. Move display:flex
onto dialog.cardsheet[open] so the closed dialog returns to display:none and
the sheet fully closes.
Raise the mobile bottom-sheet cap from 50vh to 70vh — gives the lesson list room for ~5-6 items while still leaving ~30vh of backdrop so it reads as an overlay rather than a full screen.
Light-mode --accent-2 and all --track-* were #0891B2, which is only 3.68:1 on white — below the 4.5:1 AA threshold for the bold cyan text used in interview answers, design-rubric labels, and lesson chips/facts. Darken to #0E7490 (5.36:1 on --card, 5.12:1 on --bg); still ≥3:1 as borders/icons, and keeps one cohesive cyan identity. Dark mode (#22D3EE) is unchanged (already 9:1+ on the dark surface).
dineshbyte
added a commit
that referenced
this pull request
Jun 22, 2026
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.
No description provided.