bachir/drupal-figli-compta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix horizontal scroll in the entrée/versement drill-down modal

Browse Source 
900px was way too narrow for 16 columns forced to nowrap. Widened the
modal to 96vw, let cells wrap instead of forcing nowrap, and gave
columns proportional widths (table-layout: fixed otherwise spread all
16 evenly, squeezing the libellé text into the same width as an empty
compte column).
This commit is contained in:
bachir
2026-09-05 13:20:13 +02:00
parent 9ec0aa4699
commit 82b03ac5e2
1 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/modules/custom/figli_compta_ledger/css/home.css
+41 -3
View File
@@ -349,9 +349,8 @@ html.gin--dark-mode #figli-home-app {
color: var(--figli-text); color: var(--figli-text);
border: 1px solid var(--figli-border); border: 1px solid var(--figli-border);
border-radius: 8px; border-radius: 8px;
max-width: 90vw; width: 96vw;
max-height: 85vh; max-height: 85vh;
width: 900px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
@@ -383,16 +382,55 @@ html.gin--dark-mode #figli-home-app {
color: var(--figli-text); color: var(--figli-text);
} }
#figli-home-app .figli-modal-body { #figli-home-app .figli-modal-body {
overflow: auto; overflow-y: auto;
overflow-x: hidden;
padding: 0; padding: 0;
} }
#figli-home-app .figli-modal-body table { #figli-home-app .figli-modal-body table {
font-size: 0.8rem; font-size: 0.8rem;
table-layout: fixed;
width: 100%;
/* Only a handful of rows in this view -- wrap instead of the main
table's nowrap, so 14 columns fit the modal width without ever
needing horizontal scroll. */
white-space: normal;
} }
#figli-home-app .figli-modal-body thead th { #figli-home-app .figli-modal-body thead th {
position: sticky; position: sticky;
top: 0; top: 0;
} }
/* table-layout: fixed otherwise spreads all 16 columns evenly, squeezing
the libellé text into the same width as an empty compte column --
give the columns that actually carry content (client/type/libellé)
proportionally more room, comptes/montants less. */
#figli-home-app .figli-modal-body th:nth-child(1),
#figli-home-app .figli-modal-body td:nth-child(1) {
width: 2rem;
}
#figli-home-app .figli-modal-body th:nth-child(2),
#figli-home-app .figli-modal-body td:nth-child(2) {
width: 4.5rem;
}
#figli-home-app .figli-modal-body th:nth-child(3),
#figli-home-app .figli-modal-body td:nth-child(3) {
width: 9%;
}
#figli-home-app .figli-modal-body th:nth-child(4),
#figli-home-app .figli-modal-body td:nth-child(4) {
width: 8%;
}
#figli-home-app .figli-modal-body th:nth-child(5),
#figli-home-app .figli-modal-body td.figli-libelle {
width: 24%;
min-width: 0;
max-width: none;
}
#figli-home-app .figli-modal-body .amount.compte-col {
width: 4.5%;
}
#figli-home-app .figli-modal-body .amount:not(.compte-col) {
width: 7%;
}
/* Sliding-window edge markers (IntersectionObserver targets) -- kept /* Sliding-window edge markers (IntersectionObserver targets) -- kept
short so they don't add visible dead space when idle, tall enough short so they don't add visible dead space when idle, tall enough