diff --git a/web/modules/custom/figli_compta_ledger/css/home.css b/web/modules/custom/figli_compta_ledger/css/home.css index 9572f6e..617bd66 100644 --- a/web/modules/custom/figli_compta_ledger/css/home.css +++ b/web/modules/custom/figli_compta_ledger/css/home.css @@ -159,24 +159,49 @@ html.gin--dark-mode #figli-home-app { } #figli-home-app .figli-table-wrap { - overflow-x: auto; + /* Fixed columns below are sized to always fit -- hidden (not auto) so + there's never a horizontal scrollbar to fight the vertical one for + layout space. With both set to auto, the browser has to guess + whether a vertical scrollbar will appear before it can lay out the + table's width:100%, and getting that guess wrong understates the + available width by one scrollbar's worth, which was enough to tip + this from "just barely fits" into "needs to scroll horizontally + too" -- and any actual residual overflow (a column pushed a few px + over by content this doesn't attempt to break) is silently clipped + here instead of surfacing a scrollbar for it. */ + overflow-x: hidden; border: 1px solid var(--figli-border); border-radius: 6px; max-height: 75vh; overflow-y: auto; } +/* table-layout: fixed -- auto layout was recomputing every column's + width from whatever happened to be currently loaded, so the table + visibly reflowed (and drifted wider than the viewport, forcing + horizontal scroll) every time loadOlder()/loadNewer() brought in rows + with different content. Fixed layout locks each column to the widths + set below regardless of content, so the table's total width never + changes -- no more horizontal scroll, and loadOlder()'s scroll + compensation (which assumes the height delta after prepending is + *only* the new rows' own height) is now accurate again, since existing + rows no longer reflow when new ones are added. */ #figli-home-app table { width: 100%; + table-layout: fixed; border-collapse: collapse; background: var(--figli-bg); color: var(--figli-text); font-size: 0.8rem; - white-space: nowrap; } #figli-home-app th, #figli-home-app td { + /* border-box -- otherwise each column's percentage width (fixed + layout, above) sets only the content box, and this cell's own + padding/border get added on top of it, so 18 columns' worth of + padding quietly pushes the table wider than 100% again. */ + box-sizing: border-box; text-align: left; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--figli-border); @@ -201,16 +226,16 @@ html.gin--dark-mode #figli-home-app { font-variant-numeric: tabular-nums; } +#figli-home-app th:nth-child(6), #figli-home-app td.figli-libelle { + width: 15%; white-space: normal; - min-width: 220px; - max-width: 340px; } +#figli-home-app th:nth-child(7), #figli-home-app td.figli-flag-cell { + width: 8%; white-space: normal; - min-width: 120px; - max-width: 220px; } #figli-home-app tr.figli-group-row td { @@ -378,12 +403,52 @@ html.gin--dark-mode #figli-home-app { table's default 0.6rem horizontal cell padding. */ #figli-home-app td.actions-col, #figli-home-app th.actions-col { - width: 1%; + width: 3%; padding: 0.2rem 0.1rem; text-align: center; white-space: nowrap; } +/* Column widths for the fixed layout above -- sized so the widest + realistic content (longest client/type label, an 8-figure amount) + fits without pushing the table past 100%, while the two free-text + columns (Client, Libellé/Détail) get most of the remaining room. + Every column is a percentage (including actions-col/Date above, + deliberately not rem) -- mixing units meant the rem columns' pixel + width was added *on top of* the percentage budget instead of coming + out of it, silently pushing the table a few pixels past 100% and + reintroducing the horizontal scrollbar this is meant to avoid. + Percentages intentionally sum to a little under 100%: table-layout: + fixed treats them as relative weights, not a hard budget, so slightly + under leaves headroom rather than risking every column getting + scaled down to fit. */ +#figli-home-app th:nth-child(2), +#figli-home-app td:nth-child(2) { + width: 6%; + white-space: nowrap; +} +#figli-home-app th:nth-child(3), +#figli-home-app td:nth-child(3) { + width: 10%; +} +#figli-home-app th:nth-child(4), +#figli-home-app td:nth-child(4) { + width: 7%; +} +#figli-home-app th:nth-child(5), +#figli-home-app td:nth-child(5) { + width: 5.5%; + white-space: nowrap; +} +#figli-home-app .amount:not(.compte-col) { + width: 5.5%; + white-space: nowrap; +} +#figli-home-app .amount.compte-col { + width: 3.5%; + white-space: nowrap; +} + /* Buttons stay inline (not flex) inside the