Narrow edit columns for wider amounts, modal-based signalement, fix scroll storm
Three related /lignes fixes: 1. Column widths: shrink Date/Facture/Libellé/Signalement (the four editable text columns) to free up room for the amount columns (Montant HT/TTC, the 8 compte columns, Écart), which were cramped. Date/Facture stay nowrap (already short: jj/mm/aa, Fxxxxxxx); Libellé/ Signalement keep wrapping. 2. Signalement editing: replaced the comma-separated inline text input with a small modal -- one tag per line, each with its own remove button, plus an add field at the bottom. Clearer than parsing/ retyping a whole comma list to drop one tag. Backend endpoint is unchanged (still takes a comma-joined value); only the front-end interaction model changed. 3. Scroll storm: a continuous scroll gesture fires many native 'scroll' events, and checkEdges() ran on every one of them -- each qualifying event queued its own loadOlder()/loadNewer() call (queuing, not dropping, was the previous session's fix for a *different* bug), and every queued call did a real fetch + scroll compensation regardless of whether an earlier one already moved the window away from the edge. That pileup is what looked like the same request firing over and over and dragged the scroll position around unpredictably. Fixed by guarding checkEdges() with the existing loadingOlder/ loadingNewer flags so it stops queuing once one's already in flight. (A first attempt at this suppressed the compensation write's own resulting scroll event via a flag cleared on requestAnimationFrame -- reproduced, live, the exact "stuck forever" failure already fixed once this session for the old rAF-based scroll throttle, because rAF doesn't reliably fire in this environment. Removed: turns out no suppression is needed at all, since that event finds loadingOlder already true and the checkEdges() guard blocks it on its own.) Also added a re-entrancy guard to pollForChanges(), which had no protection against a slow response overlapping with the next setInterval tick. Verified with scripted scroll stress tests (dense bursts of 40-100 events, and repeated attempts to scroll back from the very top): exactly one fetch per genuine edge crossing, no duplicate requests, scroll position stays correctly anchored, never snaps back down. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -228,13 +228,13 @@ html.gin--dark-mode #figli-home-app {
|
||||
|
||||
#figli-home-app th:nth-child(6),
|
||||
#figli-home-app td.figli-libelle {
|
||||
width: 15%;
|
||||
width: 10%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#figli-home-app th:nth-child(7),
|
||||
#figli-home-app td.figli-flag-cell {
|
||||
width: 8%;
|
||||
width: 6%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@@ -424,7 +424,7 @@ html.gin--dark-mode #figli-home-app {
|
||||
scaled down to fit. */
|
||||
#figli-home-app th:nth-child(2),
|
||||
#figli-home-app td:nth-child(2) {
|
||||
width: 6%;
|
||||
width: 5%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#figli-home-app th:nth-child(3),
|
||||
@@ -437,15 +437,15 @@ html.gin--dark-mode #figli-home-app {
|
||||
}
|
||||
#figli-home-app th:nth-child(5),
|
||||
#figli-home-app td:nth-child(5) {
|
||||
width: 5.5%;
|
||||
width: 5%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#figli-home-app .amount:not(.compte-col) {
|
||||
width: 5.5%;
|
||||
width: 6.2%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#figli-home-app .amount.compte-col {
|
||||
width: 3.5%;
|
||||
width: 4.3%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -556,6 +556,54 @@ html.gin--dark-mode #figli-home-app {
|
||||
border-color: var(--figli-border);
|
||||
color: var(--figli-text);
|
||||
}
|
||||
/* Signalement modal -- much smaller than the entrées/sorties drill-down
|
||||
above (a short list of tags, not a table), so it gets its own narrow
|
||||
width instead of the 96vw default. */
|
||||
#figli-home-app .figli-flag-modal {
|
||||
width: 24rem;
|
||||
max-width: 90vw;
|
||||
}
|
||||
#figli-home-app .figli-flag-modal-body {
|
||||
padding: 0.75rem 1rem 1rem;
|
||||
}
|
||||
#figli-home-app .figli-flag-modal-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0;
|
||||
border-bottom: 1px solid var(--figli-border);
|
||||
}
|
||||
#figli-home-app .figli-flag-remove {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: var(--figli-text-light);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
flex: none;
|
||||
}
|
||||
#figli-home-app .figli-flag-remove:hover {
|
||||
background: var(--figli-bg-alt);
|
||||
border-color: var(--figli-border);
|
||||
color: var(--figli-error);
|
||||
}
|
||||
#figli-home-app .figli-flag-modal-add {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
#figli-home-app .figli-flag-modal-add input {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border: 1px solid var(--figli-border);
|
||||
border-radius: 4px;
|
||||
background: var(--figli-bg);
|
||||
color: var(--figli-text);
|
||||
}
|
||||
|
||||
#figli-home-app .figli-modal-body {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
Reference in New Issue
Block a user