From ab98b51961830865964a7736bb03de6691d41b4f Mon Sep 17 00:00:00 2001
From: Forthtilliath <vincent.lisita+gh@gmail.com>
Date: Wed, 7 Oct 2026 20:52:30 +0200
Subject: [PATCH] fix: keep property rows readable in a narrow panel

---
 src/devpanel/styles/base.css         |  3 +++
 src/devpanel/styles/category-nav.css |  8 ++++++++
 src/devpanel/styles/property-row.css | 10 +++++++---
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/devpanel/styles/base.css b/src/devpanel/styles/base.css
index 6d5bb69..e1e8adf 100644
--- a/src/devpanel/styles/base.css
+++ b/src/devpanel/styles/base.css
@@ -1,5 +1,8 @@
+/* Barres de défilement fines : le panneau est étroit, celles du système (17px sous Windows)
+   mangeaient la place des colonnes. */
 * {
   box-sizing: border-box;
+  scrollbar-width: thin;
 }
 
 html,
diff --git a/src/devpanel/styles/category-nav.css b/src/devpanel/styles/category-nav.css
index 4501f77..923e430 100644
--- a/src/devpanel/styles/category-nav.css
+++ b/src/devpanel/styles/category-nav.css
@@ -70,6 +70,14 @@
 
 .devwind-category-nav__content {
   flex: 1;
+  min-width: 0;
   overflow-y: auto;
   padding: 4px 10px;
+  container-type: inline-size;
+}
+
+/* Colonne plus étroite que le popover (fenêtre par défaut, rail élargi) : sans borne, il
+   déborderait à gauche de la colonne, qui le rognerait. */
+.devwind-category-nav__content .devwind-popover__content {
+  width: min(220px, 100cqw);
 }
diff --git a/src/devpanel/styles/property-row.css b/src/devpanel/styles/property-row.css
index 5f9ff6a..b475b42 100644
--- a/src/devpanel/styles/property-row.css
+++ b/src/devpanel/styles/property-row.css
@@ -1,16 +1,20 @@
 /* --- Ligne de propriété compacte (remplace les grilles à plat) --- */
 
+/* Fenêtre étroite : côtés et valeur passent à la ligne plutôt que de réduire le libellé à rien. */
 .devwind-row {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
+  justify-content: flex-end;
+  gap: 6px 8px;
   padding: 6px 0;
   border-bottom: 1px solid var(--dw-bg-subtle);
 }
 
 .devwind-row__label {
-  flex: 1;
-  min-width: 0;
+  flex: 1 0 auto;
+  min-width: 4em;
+  max-width: 100%;
   font-size: 11px;
   color: var(--dw-text-strong);
   overflow: hidden;