fix(e10): stop the hidden chip measurer scrolling the whole app sideways
The four chip lanes render an intentionally unbounded hidden "mirror" so the shared fit core can read each chip's natural width. An absolutely positioned box still contributes to its ancestors' SCROLLABLE overflow, and `visibility: hidden` does not exempt it — and nothing between the toolbar band and <html> clipped it. At the 1024x768 floor that meant the channel manager's document scroll width was 1258px: the whole app scrolled 249px sideways into dead space and dragged the fixed header to x=-177. The same mirror was also 228px wide inside the Tags column's 144px cell, which pushed the table to 990px inside its 906px container — i.e. it broke DataTable's "the table never exceeds its container" contract and truncated channel names to "The...". One cause, two symptoms. The lane now carries a shared `chipLaneClass` = `relative overflow-clip`, so the contract lives in one constant instead of four hand-rolled class strings. `clip` rather than `hidden` because it creates no scrollport, so nothing can ever scroll the mirror into view. Measurement is untouched: offsetLeft/offsetWidth are layout values and a clip does not change layout. Measured after: document 1258 -> 1024, sideways scroll 249 -> 0, table 990 -> 921 with no cell overflow, and the "+N" collapse still fits exactly as before. A source-level test asserts every component rendering a mirror uses the lane class — the drift a fifth hand-rolled lane would introduce, which no DOM test can catch since jsdom has no layout engine to overflow.
This commit is contained in:
@@ -15,6 +15,25 @@ import { useLayoutEffect, useRef, useState, type RefObject } from "react";
|
||||
// chip would take in the real lane. Reads real rem boxes, so nothing is frozen in px (the text-size
|
||||
// slider scales the gap and chip widths, and the fit follows).
|
||||
|
||||
/**
|
||||
* The class the chip LANE must carry — both halves are load-bearing.
|
||||
*
|
||||
* `relative` is the measurement contract: the hidden mirror is `absolute left-0 top-0`, so the lane is
|
||||
* its offsetParent and a mirror-relative right edge is directly comparable to the lane's clientWidth
|
||||
* (see the coordinate note above).
|
||||
*
|
||||
* `overflow-clip` is the containment half. The mirror is laid out UNBOUNDED — that is the whole point,
|
||||
* it reads natural widths — so its box sticks out far past the lane. An absolutely-positioned box still
|
||||
* contributes to its ancestors' SCROLLABLE overflow, and `visibility: hidden` does NOT exempt it, so
|
||||
* without a clip the mirror leaks all the way up to <html>. Measured on the channel manager at a 1024px
|
||||
* viewport (E10 S4): the mirror dragged the document's scroll width to 1258px — the whole app scrolled
|
||||
* 249px sideways and the fixed header slid to x=-177 — and widened the Tags cell 84px past the width its
|
||||
* fixed-layout column had assigned it. `clip`, not `hidden`, because clip creates no scrollport, so
|
||||
* nothing can ever scroll the mirror into view. The clip cannot disturb the measurement: offsetLeft and
|
||||
* offsetWidth are layout values, and clipping does not change layout.
|
||||
*/
|
||||
export const chipLaneClass = "relative overflow-clip";
|
||||
|
||||
export interface ChipRowGeometry {
|
||||
/** Available lane width — the visible row's clientWidth. */
|
||||
avail: number;
|
||||
|
||||
Reference in New Issue
Block a user