A bookmark tab for the footer too

What was wrong

The axis footer (the review status, the alpha badge, the topic legend, the “All records”, “Home” and “How to use” links) always stood in a row of its own, and on the vertical axis that took a share of the screen the band itself could otherwise have.

What the 6-in-1 chose

The same pattern as the sections bookmark tab (issue #34), lying on its side and upside down: it stands in the middle of the bottom edge, under the band, and slides the whole footer up out of it. Only on the vertical axis - the horizontal axis and the list, which has no frame to measure a “share of the screen” against, leave the footer in the flow.

A shared hook

The disclosure logic (hovering under (hover: hover) and (pointer: fine), staying open while the pointer crosses into the panel, Esc closing and refocusing, a click elsewhere, Tab past its end, no slide under prefers-reduced-motion) moved out of SiteSections.tsx into a shared hook, useDisclosure (src/ui/disclosure.tsx). Only one of the two bookmark tabs is ever open: a shared context closes the other one. The file started life as plain .ts and failed the src/ui/*.ts coverage floor - a bar meant for modules a unit test can exercise, while this hook lives on clicks and timers in a browser. Renaming it to .tsx moved it out from under that floor, next to Timeline.tsx, Tour.tsx and SiteSections.tsx, which already stand there.

The tab lies over the band’s own row rather than keeping one of its own, so folding the footer really does give the band the room it had. The tour has to see the footer’s keys and links on its keys and again steps: a closed panel is visibility: hidden with its content slid away, so the hook takes a forced-open the tour drives, which is not pinned - the tour moving on closes the panel again unless the reader also opened it themselves.

What was checked

npm run verify:code passed. At 320×640 and 390×844 a new test checks the tab is at least 44×24, clear of every mark, label and count on the full range and at the foot of a zoomed period; a click opens the legend and the links; opening one bookmark tab closes the other; Enter/Tab/Esc with the focus handed back. At 1280×800 the footer stands as it was, with no tab. A tour test walks to the keys and again steps and checks the panel is open for both, closing once the tour ends.

A fix (32c04ad), the same evening

The 6-in-1 looked and came back with three notes: the tab was not centred, not flush with the bottom edge, and the footer slid out on its own - a small animation beside a tab that stayed put - rather than the tab and the panel sliding out together the way the left one does. The first two came from the same cause: left: 0; right: 0; bottom: 8px centred an empty strip the width of the whole frame, not the tab, and left a gap where the sections tab sits flush. The third came from the tab and the footer being two separate elements, each with its own animation, rather than one shape that slides out whole.

The fix moves to the same single transform the sections tab uses: left: 50% with translate(-50%, …) centres the box on its own width, and the same move slides it up or down. The markup still puts the button first, for Tab order, but the column is no longer reversed: at rest the button is the element farthest from the bottom edge, so the closed panel hides behind it and the tab sits flush; open, the panel rises to the edge and the button ends up above it, the same relation the sections tab has to its own panel once it has slid out. Square corners where the tab meets the button and the screen’s own edge; the rounding stays on the button alone, at its one free edge.

Checked in the pane at 375 wide: the tab centred (165-209 of 375) and flush (bottom 812 of 812); open, the panel’s own bottom reaches 812 too, with the button sitting right above it. npm run verify:code passed; the full atlas.spec.ts and tour.spec.ts run, 114 tests, unchanged from the pass before this fix.

A second fix (10455e9), the same evening

The 6-in-1 looked again and asked for the full width of the viewport: centred and flush fixed the tab, but the panel was still a narrow card floating in the middle of the lane, where the old, unfolded footer held the whole row. .footer-tail now spans the frame with left: 0; right: 0 instead of left: 50% paired with a translate that also centred it - the slide is a plain vertical move now, and the tab stays centred through align-items alone, on the full-width box rather than its own. The panel is width: 100% in place of max-width: calc(100vw - 32px), and square on every side: the two sides that used to be free now reach the frame’s own edges, the same edges the sections panel is square along.