diff --git a/src/screens/blocking/BlockLists.module.css b/src/screens/blocking/BlockLists.module.css index e334a48..06da5ee 100644 --- a/src/screens/blocking/BlockLists.module.css +++ b/src/screens/blocking/BlockLists.module.css @@ -63,7 +63,9 @@ row's name goes in `aria-label` instead, as the table checkboxes of Zones do. It takes BOTH classes `Check` gives its own DOM: `check` on the label (the 26 px target and the input's alignment) and `toggle` for the switch drawing. */ -.switch { composes: check from '../../ui/Check.module.css'; } +/* Top-aligned with the list's first line (the cell is `align-top`), so the switch + keeps one place however tall the row grows. */ +.switch { composes: check from '../../ui/Check.module.css'; padding: 0; min-height: 0; } .name { font-weight: 600; } /* The URL wraps after its separators (`ui/UrlText`), not at whatever letter meets the diff --git a/src/screens/blocking/BlockLists.tsx b/src/screens/blocking/BlockLists.tsx index e6c2587..b1bbcef 100644 --- a/src/screens/blocking/BlockLists.tsx +++ b/src/screens/blocking/BlockLists.tsx @@ -761,7 +761,7 @@ export function BlockLists({ td: (item) => item.kind === 'heading' ? { colSpan: 4, scope: 'colgroup', role: 'columnheader' } - : undefined, + : { className: 'align-top!' }, cell: (item) => { if (item.kind === 'heading') return item.node const { l, i } = item