Fix table jitter, horizontal scroll, and vertical scroll snapping on /lignes
Root cause: the main table used auto layout, so every loadOlder()/ loadNewer() reflowed every column's width based on whatever was currently loaded -- visibly shifting the table, spilling past the viewport into a horizontal scrollbar, and corrupting loadOlder()'s scroll-position compensation (which assumes the scrollHeight delta after prepending rows is *only* the new rows' own height -- not true once existing rows also reflow). That's what made scrolling up feel like it kept snapping back down. - table-layout: fixed with explicit per-column widths (percentages throughout, not mixed with rem -- mixing meant the rem columns' width was added on top of the percentage budget instead of coming out of it), plus box-sizing: border-box so padding doesn't inflate columns beyond their declared width. - overflow-x: hidden instead of auto on the scroll container: with both x and y auto on the same element, the browser has to guess whether a vertical scrollbar will appear before laying out width: 100%, and a wrong guess understates available width by a scrollbar's worth -- exactly enough to tip a tightly-fitting table into needing horizontal scroll too. - Fixed a footer-row column count bug found along the way: it still had two actions-col cells and a colspan=5 label from before the link button was removed, leaving the label 6 columns short of Signalement and misaligning every footer cell after it. Verified with a 25-round scripted scroll-up stress test spanning 3 loadOlder() triggers: scroll position stays correctly anchored near where the user was looking, never jumps toward the bottom. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -250,8 +250,7 @@
|
||||
<tfoot>
|
||||
<tr class="figli-totals-row">
|
||||
<td class="actions-col"></td>
|
||||
<td class="actions-col"></td>
|
||||
<td colspan="5">
|
||||
<td colspan="6">
|
||||
Solde {{ currentYear || '…' }} (créditeur / débiteur)
|
||||
<span v-if="currentYearLoading" class="figli-note">chargement…</span>
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user