Raise dialogs and the composer over the mobile drawer

On a phone the folder list is the drawer, so it is also where a new folder
is started -- and the New folder dialog was stacked at 900 against the
drawer's 950, so it opened behind the folder list with only a sliver
showing past the drawer's right edge. Unusable: the name field and the
Cancel button were both underneath.

The same trigger, the same fault, one layer down: Compose in the drawer
opens a full-screen composer, and at 800 that came up behind the drawer
too.

A modal has to outrank the navigation that raised it. The dialog backdrop
goes to 960 and the composer dock to 955, which keeps every relationship
those two already had -- a dialog still clears a composer, popovers,
tooltips and toasts still clear both -- and adds the one that was missing.
Desktop is untouched: the drawer's z-index only exists below 768px, and
nothing sat between 800 and 960 anywhere else.

The stack is now written down beside `.dialog-backdrop`, and guarded by a
test on the stylesheet rather than a component test: jsdom has no paint
order, so nothing in a rendered tree can tell that a dialog is behind the
drawer that opened it.

No user-visible strings change; the nine catalogues are untouched, and the
fallback count holds at 16 in each.
This commit is contained in:
2026-09-06 21:39:45 -07:00
parent 0e05bee69a
commit cd6dff5346
3 changed files with 83 additions and 4 deletions
+4 -2
View File
@@ -151,8 +151,10 @@ export function AppShell({ children }: { children: ReactNode }) {
Putting a close where the hamburger was means the second press
lands on the control that undoes the first, which is where the hand
is already going. It cannot be done by raising the top bar over the
drawer instead: it would then also sit over a full-screen composer,
which is stacked lower still.
drawer instead: the top bar sits under everything that takes the
screen -- see the stack by `.dialog-backdrop` -- and lifting it
past the drawer would put it in among the composer and the
dialogs, which it has no business covering.
*/}
{isMobile && (
<div className="drawer-head">