wrolpi/app/src/components
Roland 52ae95ff47
ui: pages own the space between their blocks
Panels shared edges: two 1px borders meeting, which reads as one tall
surface with a rule across it rather than a seam between two.

Done as `margin-bottom` on the panel first, which is the anti-pattern, and
it failed in both of the ways that rule is known to fail before the reading
was done.  It compounded with the gap of every Stack that already held
panels -- four of them, spacing those lists at 35.2px against the app's
17.6px -- and the `:last-child` reset meant to keep trailing space off the
bottom of a container silently did nothing, because Media wrapping makes a
panel the only child of its own wrapper.  On Status that separated four
pairs out of five and left the first touching.

So the space belongs to whatever stacks the blocks.  `.wrolpi-stack` is on
PageContainer, which every page uses, and on the three wrappers that stack
blocks somewhere the page's own stack cannot reach: Settings' panel wrapper,
the block below the video player, and the Zim and Map route wrappers, which
hold their tab bar outside PageContainer.

A gap rather than `> * + * { margin-top }`, which was tried and is quietly
broken here: Media injects `.fresnel-container { margin: 0; padding: 0 }` at
runtime, same specificity, later source order, so every wrapped block threw
the margin away.  A child cannot zero its parent's gap.  It also means
Media's hidden half contributes nothing, where the owl selector spaced
around something invisible.

With the page owning the spacing, the blocks that owned some of it had to
give it up, or their margin was added to the gap: the tab bar (33px against
17.6 everywhere else), the shared search control bar and paginator on
Videos/Archives/Docs/Files, the card grid, the file browser's filter row and
the inventory search.  Two margins deliberately stay -- the file browser's
4em, which reserves room for the sticky buttons (62645831), and heading
margins, which bind a heading to the content below it.

Tests plant each of the three failures: the wrapped block, a child that
zeroes its own margin, and a hidden Media half.  Verified in the browser on
sixteen routes and in all four themes -- every stacked pair 17.6px, the
map's 85vh box and the video player unchanged, no horizontal overflow.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-05 18:41:17 -06:00
..
admin ui: pages own the space between their blocks 2026-08-05 18:41:17 -06:00
calculators ui: scale the whole interface by 10%, off the root font-size 2026-08-05 18:40:54 -06:00
collections ui: only the top modal answers Escape, and the audited widths 2026-08-05 18:38:07 -06:00
inventory ui: pages own the space between their blocks 2026-08-05 18:41:17 -06:00
ui ui: pages own the space between their blocks 2026-08-05 18:41:17 -06:00
AddToPlaylist.js ui: Common.js and thirteen more files off Semantic 2026-08-05 18:34:50 -06:00
Apps.js fix: break the import cycle that put useCalculators in the TDZ 2026-08-05 18:37:53 -06:00
Archive.js ui: cards get legible titles, contained posters, and meta beside the title 2026-08-05 18:37:49 -06:00
ArchivePreview.js ui: Common.js and thirteen more files off Semantic 2026-08-05 18:34:50 -06:00
BulkTagModal.js ui: only the top modal answers Escape, and the audited widths 2026-08-05 18:38:07 -06:00
BulkTagModal.test.js ui: migrate Downloads, Upload, and BulkTagModal off Semantic 2026-08-05 18:35:32 -06:00
Calculators.js ui: fix the cypress failures, and two real defects behind them 2026-08-05 18:35:07 -06:00
CbzViewer.js ui: Common.js and thirteen more files off Semantic 2026-08-05 18:34:50 -06:00
Channels.cy.js Moving form fields. 2025-12-06 15:11:37 -07:00
Channels.js ui: only the top modal answers Escape, and the audited widths 2026-08-05 18:38:07 -06:00
Common.js ui: pages own the space between their blocks 2026-08-05 18:41:17 -06:00
Common.test.js ui: pages own the space between their blocks 2026-08-05 18:41:17 -06:00
DatesSelector.js ui: thirty-five files off Semantic, leaving fifteen 2026-08-05 18:34:58 -06:00
DesktopToggle.test.js ui: Common.js and thirteen more files off Semantic 2026-08-05 18:34:50 -06:00
Docs.js ui: migrate Docs.js and Zim.js off Semantic UI React 2026-08-05 18:35:27 -06:00
DomainEditPage.test.js app: handle form fetch failures without unhandled rejection 2026-07-16 19:40:28 -06:00
DomainsPage.test.js Reformatting code. 2025-12-06 15:11:37 -07:00
DomainTagging.test.js test: one place for fixtures, real providers instead of mocked context modules 2026-08-05 18:36:48 -06:00
DonatePage.js ui: only the top modal answers Escape, and the audited widths 2026-08-05 18:38:07 -06:00
Download.cy.js build: uninstall Semantic UI 2026-08-05 18:36:31 -06:00
Download.js ui: thirty-five files off Semantic, leaving fifteen 2026-08-05 18:34:58 -06:00
Download.test.js Reformatting code. 2025-12-06 15:11:37 -07:00
ErrorBoundary.js ui: nine leaf files off Semantic, and the components they needed 2026-08-05 18:34:49 -06:00
FileBrowser.js review: record why make-directory is wider than rename 2026-08-05 18:40:51 -06:00
FileBrowser.test.js test: the theme drives the colour scheme, and mockModule takes the module 2026-08-05 18:36:53 -06:00
FilePreview.js ui: only the top modal answers Escape, and the audited widths 2026-08-05 18:38:07 -06:00
FilePreview.test.js File preview: Open in Slicer button for STL/3MF files. 2026-07-05 13:31:40 -06:00
Files.js ui: pages own the space between their blocks 2026-08-05 18:41:17 -06:00
Flasher.js ui: scale the whole interface by 10%, off the root font-size 2026-08-05 18:40:54 -06:00
Flasher.test.js ui: migrate Flasher.js off Semantic UI React 2026-08-05 18:35:45 -06:00
Headline.js ui: nine leaf files off Semantic, and the components they needed 2026-08-05 18:34:49 -06:00
HelpModal.js ui: thirty-five files off Semantic, leaving fifteen 2026-08-05 18:34:58 -06:00
KeyboardShortcutsProvider.js ui: only the top modal answers Escape, and the audited widths 2026-08-05 18:38:07 -06:00
Map.js ui: pages own the space between their blocks 2026-08-05 18:41:17 -06:00
Map.test.js review: name the icon-only controls, and make two guards mean what they say 2026-08-05 18:40:49 -06:00
MapSearchView.js ui: widen a card's track by 25% 2026-08-05 18:41:06 -06:00
MapViewer.js review: close the mixed-unit gaps the scale left behind 2026-08-05 18:41:01 -06:00
Nav.js style: spell it "color" everywhere 2026-08-05 18:40:50 -06:00
otp.js Move One-Time Pad encryption to the browser (#479) 2026-06-13 13:52:34 -06:00
otp.test.js Move One-Time Pad encryption to the browser (#479) 2026-06-13 13:52:34 -06:00
Placeholder.js ui: Common.js and thirteen more files off Semantic 2026-08-05 18:34:50 -06:00
Playlists.js ui: Channels.js and Playlists.js off Semantic 2026-08-05 18:35:10 -06:00
Playlists.test.js Add ordered collections (playlists): polymorphic items + item API (#475) 2026-06-11 19:46:34 -06:00
Search.js ui: the corner triggers, the More button, and the search modal 2026-08-05 18:38:04 -06:00
SearchFilterModal.test.js ui: thirty-five files off Semantic, leaving fifteen 2026-08-05 18:34:58 -06:00
Share.js ui: only the top modal answers Escape, and the audited widths 2026-08-05 18:38:07 -06:00
ShortcutHint.js Displaying cmd+k/ctrl+k global search keyboard shortcut suggestion. 2026-02-23 16:07:22 -07:00
SortableTable.js ui: nine leaf files off Semantic, and the components they needed 2026-08-05 18:34:49 -06:00
Tables.js ui: nine leaf files off Semantic, and the components they needed 2026-08-05 18:34:49 -06:00
TaggedDeleteConfirmModal.js ui: let a confirmation choose its width 2026-08-05 18:40:53 -06:00
TaggedDeleteConfirmModal.test.js ui: let a confirmation choose its width 2026-08-05 18:40:53 -06:00
Theme.tsx ui: toasts move to the top right, get readable titles, and get tests 2026-08-05 18:37:19 -06:00
ThemeProvider.test.js test: act on review — observe the wiring, and stop the soft assertions 2026-08-05 18:37:22 -06:00
ThemeSamplePage.js ui: scale the whole interface by 10%, off the root font-size 2026-08-05 18:40:54 -06:00
Upload.js ui: migrate Downloads, Upload, and BulkTagModal off Semantic 2026-08-05 18:35:32 -06:00
Vars.js Restore "Most Views" download order 2026-07-07 16:34:50 -06:00
VideoPlayer.js ui: pages own the space between their blocks 2026-08-05 18:41:17 -06:00
VideoPlayer.test.js videos: address review — tighten auto-caption detection 2026-07-16 18:29:18 -06:00
Videos.js ui: scale the whole interface by 10%, off the root font-size 2026-08-05 18:40:54 -06:00
VncToggle.test.js ui: Common.js and thirteen more files off Semantic 2026-08-05 18:34:50 -06:00
Zim.js ui: pages own the space between their blocks 2026-08-05 18:41:17 -06:00
Zim.test.js fix: an unnamed language code took down the whole Zim manage page 2026-08-05 18:40:43 -06:00