Hang every folder off one edge, and give the drawer a way out #166

New Issue

Closed

opened 2026-09-01 05:04:38 +00:00 by jcoffey-dev · 0 comments

jcoffey-dev commented

2026-09-01 05:04:38 +00:00

Owner

Two follow-ups to #165, both found at phone width in a real browser.

Folders were not left-justified

The rule dropping the twisty's 30px gutter was scoped to .has-drill, which only lands on rows that have children. So Work lost the gutter and Inbox, Sent and the rest kept it — an 18px step between neighbours, and the column of icons came apart. Whether a folder has children is not a reason to hang it somewhere else.

The class moves from the rows to the list (.folder-drill on the nav), which is what the indent is actually a property of. Measured after, in the 300px drawer:

level	icons	labels
root (8 folders, one with children)	all x=12	all x=44
inside Work	all x=12	all x=44
back row	x=12	x=44

No obvious way out of the drawer

The drawer covers the top bar — it is taller than it — so the hamburger that opened it is underneath. Worse, that handler only ever set the drawer open (setDrawer(true)), so pressing the same place again did nothing even conceptually. The dimmed strip beside the drawer was the only exit, and nothing advertises it.

A close sits where the hamburger was. Both are moved by the same padding-left rule, so it lands on the same pixels — verified at 6px with a mouse and 12px under pointer: coarse, matching in both.
The hamburger toggles instead of only opening.
Escape closes it, for a tablet with a keyboard.

Raising the top bar above the drawer instead would have been the smaller change and is not available: the drawer is z-index 950 and a full-screen composer is 800, so a top bar above the first would also sit on top of the second.

Tests

Two more in mailbox-drilldown.test.tsx — every row in the drill list is depth-0 with the class on the nav and none on the rows, and the wide-screen tree still indents its children. jsdom has no layout, so these assert the mechanism the alignment hangs off rather than pixels; the pixel columns above were measured in Chrome. npm test 474 passing, lint and i18n:check clean, "Close menu" translated in all nine languages.

Merged 2026-08-31 as coffey-labs/ihasmail@3517d48a90

_{Rebuilt from: git history, session transcript.}

Two follow-ups to #165, both found at phone width in a real browser. ## Folders were not left-justified The rule dropping the twisty's 30px gutter was scoped to `.has-drill`, which only lands on rows that **have children**. So `Work` lost the gutter and `Inbox`, `Sent` and the rest kept it — an 18px step between neighbours, and the column of icons came apart. Whether a folder has children is not a reason to hang it somewhere else. The class moves from the rows to the list (`.folder-drill` on the nav), which is what the indent is actually a property of. Measured after, in the 300px drawer: | level | icons | labels | |---|---|---| | root (8 folders, one with children) | all x=12 | all x=44 | | inside Work | all x=12 | all x=44 | | back row | x=12 | x=44 | ## No obvious way out of the drawer The drawer covers the top bar — it is taller than it — so the hamburger that opened it is underneath. Worse, that handler only ever set the drawer *open* (`setDrawer(true)`), so pressing the same place again did nothing even conceptually. The dimmed strip beside the drawer was the only exit, and nothing advertises it. - A close sits where the hamburger was. Both are moved by the same `padding-left` rule, so it lands on the same pixels — verified at 6px with a mouse and 12px under `pointer: coarse`, matching in both. - The hamburger toggles instead of only opening. - Escape closes it, for a tablet with a keyboard. Raising the top bar above the drawer instead would have been the smaller change and is not available: the drawer is z-index 950 and a full-screen composer is 800, so a top bar above the first would also sit on top of the second. ## Tests Two more in `mailbox-drilldown.test.tsx` — every row in the drill list is `depth-0` with the class on the nav and none on the rows, and the wide-screen tree still indents its children. jsdom has no layout, so these assert the mechanism the alignment hangs off rather than pixels; the pixel columns above were measured in Chrome. `npm test` 474 passing, lint and `i18n:check` clean, "Close menu" translated in all nine languages. **Merged** 2026-08-31 as coffey-labs/ihasmail@3517d48a90a2 <sub>Rebuilt from: git history, session transcript.</sub>

This repo is archived. You cannot comment on issues.

1 Participants

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: coffey-labs/ihasmail-github-archive#166