Skip to content

fix: small-screen responsiveness and settings menu stacking#72

Merged
Razee4315 merged 1 commit into
Razee4315:mainfrom
AleenaTahir1:fix/small-screen-responsiveness
Jun 11, 2026
Merged

fix: small-screen responsiveness and settings menu stacking#72
Razee4315 merged 1 commit into
Razee4315:mainfrom
AleenaTahir1:fix/small-screen-responsiveness

Conversation

@AleenaTahir1

Copy link
Copy Markdown
Collaborator

Follow-up to #71 — these fixes were pushed to that branch right after it was merged, so they're re-sent here on a clean branch off current main.

Fixes

Settings dropdown rendered underneath the Reader/Code mode toggle

The settings dropdown and the floating mode toggle both used z-50; ties are broken by DOM order, and the toggle mounts later, so on short screens the (long) dropdown slid underneath it. The dropdown is now z-[70] (above the toggle, still below modals at z-[100]+) and gets max-h-[calc(100vh-5rem)] overflow-y-auto so it scrolls on short screens instead of clipping. The Export dropdown had the same latent tie and was raised to match.

Small-window responsiveness

  • Title bar: New / Open / Export text labels collapse to icons below the sm breakpoint, the file name truncates with an ellipsis (max-w-[28vw]), and the folder breadcrumb hides below md — so nothing overflows at the 600px minimum window width.
  • AI panel: the editor's reserved padding-right and the mode toggle's offset now clamp to min(400px, 90vw), mirroring the panel's own max-w-[90vw], so opening the panel in a narrow window no longer crushes the editor.
  • Settings modal: sidebar narrows to w-36 below sm so the content pane keeps usable width when the modal shrinks to 95vw.
  • Update dialog: scrolls (max-h-[90vh]) if taller than the viewport.

Verification

  • bun run build ✅ · bun run test 122/122 ✅

- Settings dropdown now renders above the floating Reader/Code mode
  toggle (z-[70] vs z-50; the toggle is mounted later in the DOM so it
  won the previous z-index tie) and scrolls on short screens instead of
  running underneath it. Export dropdown raised to match.
- Title bar adapts to narrow windows: New/Open/Export labels collapse
  to icons below the sm breakpoint, the file name truncates, and the
  folder breadcrumb hides below md.
- AI panel space reservation and mode-toggle offset clamp to
  min(400px, 90vw) so a narrow window isn't crushed by the open panel.
- Settings modal sidebar narrows below sm; update dialog scrolls when
  taller than the viewport.
@Razee4315 Razee4315 merged commit 008c00c into Razee4315:main Jun 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants