From 82b03ac5e27b47eb7c544b1f1b14b6804b9c970b Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Sat, 5 Sep 2026 13:20:13 +0200
Subject: [PATCH] =?UTF-8?q?Fix=20horizontal=20scroll=20in=20the=20entr?=
 =?UTF-8?q?=C3=A9e/versement=20drill-down=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 .../custom/figli_compta_ledger/css/home.css   | 44 +++++++++++++++++--
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/web/modules/custom/figli_compta_ledger/css/home.css b/web/modules/custom/figli_compta_ledger/css/home.css
index a6cdf9b..c036668 100644
--- a/web/modules/custom/figli_compta_ledger/css/home.css
+++ b/web/modules/custom/figli_compta_ledger/css/home.css
@@ -349,9 +349,8 @@ html.gin--dark-mode #figli-home-app {
   color: var(--figli-text);
   border: 1px solid var(--figli-border);
   border-radius: 8px;
-  max-width: 90vw;
+  width: 96vw;
   max-height: 85vh;
-  width: 900px;
   display: flex;
   flex-direction: column;
   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);
 }
 #figli-home-app .figli-modal-body {
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   padding: 0;
 }
 #figli-home-app .figli-modal-body table {
   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 {
   position: sticky;
   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
    short so they don't add visible dead space when idle, tall enough