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

Open

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 +2204 -599

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 <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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

Co-authored-by: Shelley <shelley@exe.dev>

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 <shelley@exe.dev>

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 <shelley@exe.dev>

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 <shelley@exe.dev>

All checks were successful

Hide all checks

CI / Unit tests (pull_request) Successful in 20s

Details

CI / E2E tests (pull_request) Successful in 49s

Details

This pull request has changes conflicting with the target branch.

• package-lock.json
• package.json

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u feat/testing:dev-bot-feat/testing

git switch dev-bot-feat/testing

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch main

git merge --no-ff dev-bot-feat/testing

git switch dev-bot-feat/testing

git rebase main

git switch main

git merge --ff-only dev-bot-feat/testing

git switch dev-bot-feat/testing

git rebase main

git switch main

git merge --no-ff dev-bot-feat/testing

git switch main

git merge --squash dev-bot-feat/testing

git switch main

git merge --ff-only dev-bot-feat/testing

git switch main

git merge dev-bot-feat/testing

git push origin main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

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.