fix(sidebar): let the workspace list scroll on mobile #98

Merged

lz merged 1 commit from fix/mobile-sidebar-scroll into main

2026-09-04 17:24:06 +02:00

lz commented

2026-09-02 15:46:10 +02:00

Owner

Closes the scrolling half of #96. First of the four PRs in docs/superpowers/specs/2026-09-02-sidebar-and-startup-design.md (design D1) — deliberately shipped alone, since it depends on nothing else in that spec.

The bug

Below 768px the workspace list cannot be scrolled; everything past the first viewport is unreachable.

Cause

.left-pane sets flex-shrink: 0 for the desktop row layout. Under 768px .main-split flips to flex-direction: column, so that shrink factor starts applying to the vertical axis instead. The pane therefore grows to its full content height and is clipped by .main-split { overflow: hidden } — which means .lp-body { overflow-y: auto } never gets a constrained height to scroll inside.

Fix

One rule, in the mobile block only:

.left-pane { flex: 1 1 auto; min-height: 0; }

Verification

Measured on the running app at 390×740 with 12 cards in the list, toggling the pre-fix rule back on inline to isolate cause from effect:

	`.left-pane` height	`.lp-body` client / scroll	scrollable	scrollTop moved
before	1488px	1488 / 1488	no	0px
after	683px	683 / 1488	yes	400px

Before the fix the last card's bottom sits at 1519px against a 740px viewport with no way to reach it.

Desktop is unaffected: at 1280px the pane still computes to 360px with flex-shrink: 0, since the media query does not apply there.

pnpm test 108 files / 1013 tests pass · pnpm run typecheck 4854 files, 0 errors · pnpm run lint clean.

Closes the scrolling half of #96. First of the four PRs in [`docs/superpowers/specs/2026-09-02-sidebar-and-startup-design.md`](../src/branch/main/docs/superpowers/specs/2026-09-02-sidebar-and-startup-design.md) (design D1) — deliberately shipped alone, since it depends on nothing else in that spec. ## The bug Below 768px the workspace list cannot be scrolled; everything past the first viewport is unreachable. ## Cause `.left-pane` sets `flex-shrink: 0` for the desktop **row** layout. Under 768px `.main-split` flips to `flex-direction: column`, so that shrink factor starts applying to the **vertical** axis instead. The pane therefore grows to its full content height and is clipped by `.main-split { overflow: hidden }` — which means `.lp-body { overflow-y: auto }` never gets a constrained height to scroll inside. ## Fix One rule, in the mobile block only: ```css .left-pane { flex: 1 1 auto; min-height: 0; } ``` ## Verification Measured on the running app at 390×740 with 12 cards in the list, toggling the pre-fix rule back on inline to isolate cause from effect: | | `.left-pane` height | `.lp-body` client / scroll | scrollable | scrollTop moved | |---|---|---|---|---| | before | 1488px | 1488 / 1488 | no | 0px | | after | 683px | 683 / 1488 | yes | 400px | Before the fix the last card's bottom sits at 1519px against a 740px viewport with no way to reach it. Desktop is unaffected: at 1280px the pane still computes to 360px with `flex-shrink: 0`, since the media query does not apply there. `pnpm test` 108 files / 1013 tests pass · `pnpm run typecheck` 4854 files, 0 errors · `pnpm run lint` clean.

lz added 1 commit

2026-09-02 15:46:10 +02:00

fix(sidebar): let the workspace list scroll on mobile

ci / nexus (pull_request) Successful in 7m45s

Details

ci / images (pull_request) Successful in 8m29s

Details

pr-image-cleanup / delete-pr-images (pull_request) Successful in 9s

Details

f1aded9690

`.left-pane` sets `flex-shrink: 0` for the desktop row layout. Under 768px
`.main-split` flips to `flex-direction: column`, so that shrink factor starts
applying to the vertical axis: the pane grows to its full content height and is
clipped by `.main-split { overflow: hidden }`. `.lp-body { overflow-y: auto }`
therefore never gets a constrained height to scroll inside, and everything past
the first viewport is unreachable.

Give the pane `flex: 1 1 auto; min-height: 0` in the mobile block only.

Measured at 390x740 with 12 cards in the list, on the real page:

  before  pane 1488px, lp-body client 1488 == scroll 1488, scrollTop stuck at 0
  after   pane  683px, lp-body client  683 <  scroll 1488, scrolls freely

Desktop is unaffected -- at 1280px the pane still computes to 360px with
`flex-shrink: 0`, since the media query does not apply there.

~~lz referenced this pull request 2026-09-02 16:29:51 +02:00~~

feat(workers): show real startup progress, and let a failed provision retry #99

lz referenced this pull request

2026-09-02 18:47:48 +02:00

feat(ui): declutter the sidebar onto a shared target menu #100

lz added this to the Sidebar declutter, startup visibility & the target menu (#96) milestone

2026-09-02 23:50:21 +02:00

lz referenced this pull request

2026-09-03 01:16:52 +02:00

feat(workers): show real startup progress, and let a failed provision retry #99

lz referenced this pull request from a commit

2026-09-04 00:15:25 +02:00