fix(ui): make app fully responsive with mobile drawer navigation #5

Closed

dev-bot wants to merge 25 commits from dev-bot/notebook:feat/testing into main

pull from: dev-bot/notebook:feat/testing

merge into: kwila:main

kwila:main

kwila:browser-repo-prototype

kwila:readme-roadmap

kwila:feat/sveltekit-tailwind4-immich-ui-migration

kwila:feat/sveltekit-markdown-editor

Conversation 0 Commits 25 Files changed 12 +2202 -597

dev-bot commented 2026-05-30 13:03:17 -04:00

Collaborator

Copy link

Mobile Responsive Redesign

This PR overhauls the CSS and styling system to make the app fully functional on mobile devices.

Issues Fixed

• Editor was completely blank on mobile — 100vh and flex layout were breaking on mobile browsers
• Sidebar was inaccessible — display: none hid it with no way to reopen
• Touch targets too small — buttons were 22-28px, well below the 44px WCAG minimum
• Header buttons cramped — "Open folder" + logo + title overflowed on small screens

Changes

• Mobile drawer navigation — sidebar becomes a slide-over drawer triggered by hamburger menu
• Overlay backdrop — tapping outside the drawer closes it
• 100dvh — uses dynamic viewport height for mobile browsers (accounts for URL bar)
• Touch-friendly targets — 44px minimum on all interactive elements
• Adaptive header — buttons condense on smaller screens (text → icon)
• Always-visible actions — row action buttons always shown on mobile (no hover)
• Bottom-sheet context menus — context menus become full-width bottom sheets on mobile
• iOS smooth scrolling — added -webkit-overflow-scrolling: touch
• Flex overflow fix — min-height: 0 on flex children prevents content blowout
• 3 breakpoints — desktop (>1024px), tablet (768-1024px), mobile (<768px)

Tests

• All 41 unit tests pass
• All 17 e2e tests pass
• Fixed duplicate aria-label conflict that was causing test failures

## Mobile Responsive Redesign This PR overhauls the CSS and styling system to make the app fully functional on mobile devices. ### Issues Fixed - **Editor was completely blank on mobile** — `100vh` and flex layout were breaking on mobile browsers - **Sidebar was inaccessible** — `display: none` hid it with no way to reopen - **Touch targets too small** — buttons were 22-28px, well below the 44px WCAG minimum - **Header buttons cramped** — "Open folder" + logo + title overflowed on small screens ### Changes - **Mobile drawer navigation** — sidebar becomes a slide-over drawer triggered by hamburger menu - **Overlay backdrop** — tapping outside the drawer closes it - **100dvh** — uses dynamic viewport height for mobile browsers (accounts for URL bar) - **Touch-friendly targets** — 44px minimum on all interactive elements - **Adaptive header** — buttons condense on smaller screens (text → icon) - **Always-visible actions** — row action buttons always shown on mobile (no hover) - **Bottom-sheet context menus** — context menus become full-width bottom sheets on mobile - **iOS smooth scrolling** — added `-webkit-overflow-scrolling: touch` - **Flex overflow fix** — `min-height: 0` on flex children prevents content blowout - **3 breakpoints** — desktop (>1024px), tablet (768-1024px), mobile (<768px) ### Tests - All 41 unit tests pass - All 17 e2e tests pass - Fixed duplicate aria-label conflict that was causing test failures

dev-bot added 23 commits 2026-05-30 13:03:17 -04:00

docs(readme): update roadmap c96d35bb2d

feat(storage): add browser repo prototype 751cfff8f0

feat(storage): add repo tree search 7fa3f55944

feat(storage): polish repo navigator 2e487fa177

feat(storage): widen notebook navigator 694b4acf08

feat(storage): simplify notebook chrome 429ab27bc6

fix(storage): restore sidebar reopen 255cae4343

fix(storage): restore sidebar reopen button 0f489d7013

feat: redesign UI as clean word-processor layout ... 1c1fdc0d04

- Replace oversized 64px header with slim 48px app bar
- Implement full-viewport app shell (header + sidebar + editor, no page scroll)
- Sidebar: 240px fixed width, collapses to 44px rail with smooth CSS transition
- Sidebar shows repo name or 'Local draft' icon, file tree with search, footer count
- Rail mode: › toggle button + vertical 'DRAFT' hint text
- Remove always-visible notice bar; errors shown inline in header only
- Editor area: no card chrome, max-width 760px centered canvas (iA Writer style)
- Status bar: slim 28px bottom bar with save status + file path
- Local draft state: centered doc icon + label + hint, '+ Open folder' CTA
- Keep all TypeScript logic 100% intact (repo browser, autosave, etc.)
- Update app.css: html/body fill viewport with overflow:hidden for proper shell

Co-authored-by: Shelley <[email protected]>

fix(ui): dark-theme toolbar, fill-height editor, dark dropdown menu ... 05d64e1373

Co-authored-by: Shelley <[email protected]>

fix(ui): fix preview mode colors via setTheme workaround for OverType bug ... 3bdcc2e100

Co-authored-by: Shelley <[email protected]>

fix(sidebar): pass expandedFolders as param so Svelte tracks reactivity ... 1a2c48c384

Co-authored-by: Shelley <[email protected]>

fix(sidebar): remove illegible book icon from repo name header ... 7cffdc982b

Co-authored-by: Shelley <[email protected]>

fix(ui): switch UI font to system sans-serif at 14px ... d1e90b90c7

Co-authored-by: Shelley <[email protected]>

fix(ui): increase status bar font size and contrast ... 7393fc20d1

Co-authored-by: Shelley <[email protected]>

fix(ui): increase sidebar and status bar text size and contrast ... eff9b5ba61

Co-authored-by: Shelley <[email protected]>

feat(file-ops): add create, rename, and delete for files and folders ... f91714a218

Co-authored-by: Shelley <[email protected]>

fix(file-ops): use native move() API for rename; robust recursive delete fallback ... 40acd93ee6

Co-authored-by: Shelley <[email protected]>

fix: intercept preview link clicks to prevent 404 navigation ... 9e2dca827f

Co-authored-by: Shelley <[email protected]>

test: add vitest unit tests and playwright e2e tests with forgejo actions CI ... 982d1bde3b

Co-authored-by: Shelley <[email protected]>

fix(e2e): disable server reuse and set global timeout to prevent stale-server failures ... d6b98219cc

Co-authored-by: Shelley <[email protected]>

chore: merge main into feat/testing, resolve conflicts keeping testing-branch improvements ... 437bdac7ce

Co-authored-by: Shelley <[email protected]>

fix(ui): make app fully responsive with mobile drawer navigation ... 74c2cda06e

- Add mobile detection via resize listener with proper cleanup
- Replace 'display: none' sidebar with slide-over drawer on mobile (<768px)
- Add hamburger menu button in header that toggles sidebar on mobile
- Add overlay backdrop that closes the drawer on tap
- Use 100dvh (dynamic viewport height) instead of 100vh for mobile browsers
- Add -webkit-overflow-scrolling: touch for smooth scrolling on iOS
- Ensure all flex children have min-height: 0 to prevent overflow issues
- Increase touch targets to 44px minimum throughout (tree rows, buttons, inputs)
- Always show row action buttons on mobile (no hover state)
- Context menus become full-width bottom sheets on mobile
- Header buttons condense: 'Open folder' text → icon on tablet/mobile
- Tablet layout (768px-1024px) uses narrower 200px sidebar
- Fix duplicate aria-label conflict between hamburger and sidebar collapse buttons
- Remove unused .ghost CSS class

All 41 unit tests and 17 e2e tests pass.

Co-authored-by: Shelley <[email protected]>

dev-bot added 1 commit 2026-05-30 13:24:19 -04:00

chore: add @types/node to fix tsconfig warning ... 506dafbcfe

The SvelteKit-generated .svelte-kit/tsconfig.json specifies types: ['node']
(required by Vite and Playwright), but @types/node wasn't installed.
This produced a persistent svelte-check warning about a missing type
definition file. Adding it as a devDependency resolves the warning.

Co-authored-by: Shelley <[email protected]>

dev-bot added 1 commit 2026-05-30 13:36:54 -04:00

fix(ui): rewrite CSS as true mobile-first with progressive enhancement ... e4ad76500a

Replace the desktop-first (max-width) approach with proper mobile-first
(min-width) design:

- Base styles: mobile (<768px) with 56px header, slide-over drawer sidebar,
  48px+ touch targets, 16px font inputs (prevents iOS zoom), bottom-sheet
  context menus, always-visible row actions
- 640px+: show full text buttons, hover-only row actions, dropdown menus
- 768px+: two-column layout, inline sidebar, rail mode, 48px header,
  compact touch targets
- 1200px+: wider sidebar for ample reading space

This is proper progressive enhancement — mobile gets the full experience
first, larger screens get additional layout features.

Co-authored-by: Shelley <[email protected]>

addison closed this pull request 2026-07-21 16:16:36 -04:00

Commenting is not possible because the repository is archived.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Assignees

Clear assignees

No assignees

1 participant

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

kwila/notebook!5

No description provided.