/* ═══ Column resize ══════════════════════════════════════════════════════════ The visible half of app/table-resize.js. The header cell is its own grip within a few pixels of its right border — there is no injected element — so everything here hangs off one class the script toggles as the pointer comes into range. ────────────────────────────────────────────────────────────────────────── */ /* Two states, and the first one is the point: hovering a header cell at all raises a grey rule on its right edge, so you can see that the edge is a thing before you have found it. Without that, the resize is a feature you have to already know about — the pointer has to be within six pixels of an invisible target for anything to happen at all. thead th is already position:sticky, which is a containing block, so the rule can sit on the border it is about to move. The checkbox and icon columns are excluded here for the same reason the script excludes them: they are fixed furniture, and offering a handle that does nothing is worse than offering none. */ .ct-table thead th:not(.ct-th-check):not(.ct-th-icon):not(.ct-td-check):not(.ct-td-icon):hover::after, .ct-table thead th.jc-grip::after{ content:""; /* Inset top and bottom rather than running the full 36px. A rule that meets the header's own borders reads as a table division — part of the furniture — instead of as a handle you can take hold of. */ position:absolute;top:9px;bottom:9px;right:0; width:2px;border-radius:1px; z-index:2; transition:background-color .12s ease; } /* Available. */ .ct-table thead th:hover::after{background:var(--border-strong)} /* In range — the pointer is on the handle, not just in the cell. */ .ct-table thead th.jc-grip{cursor:col-resize} .ct-table thead th.jc-grip::after{background:var(--brand-blue)} /* Dragging: the pointer owns the page until it lets go. The cursor is set on because the pointer leaves the header cell almost immediately. */ body.jc-col-resizing{cursor:col-resize;user-select:none} body.jc-col-resizing *{cursor:col-resize !important} /* Once a table has been sized it is table-layout:fixed, where a width on a is honoured rather than treated as a suggestion. That is also the point at which a cell has to be told what to do with content too wide for it — without this, narrowing a column pushes its neighbours instead of clipping, which is the opposite of what the drag asked for. */ .ct-table.jc-sized{table-layout:fixed} .ct-table.jc-sized thead th, .ct-table.jc-sized tbody td{overflow:hidden;text-overflow:ellipsis} /* A resized table keeps its own width rather than the min-width the screen set for it, or the columns spring back the moment they are narrowed. */ .ct-table.jc-sized{min-width:0} @media (prefers-reduced-motion:reduce){ .ct-table thead th:hover::after, .ct-table thead th.jc-grip::after{transition:none} } body.theme-dark .ct-table thead th.jc-grip::after{background:var(--brand-blue)}