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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user