diff --git a/static/style.css b/static/style.css index 674c0dd2..4d46fd8d 100644 --- a/static/style.css +++ b/static/style.css @@ -84,7 +84,21 @@ body.builderBody{ display:flex; flex-direction:column; height:100vh; margin:0; o body.builderBody > .topbar{ flex:0 0 auto; } body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; } -.content-builder{ max-width:1600px; } +.content-builder{ + /* .content (ci-dessus) pose "margin:0 auto" pour centrer une page normale + — mais sur cette page, le body est un flex-container en colonne + (body.builderBody), et une marge horizontale "auto" y désactive le + stretch d'un flex-item : sa largeur est alors recalculée en + "shrink-to-fit" à partir de son contenu, un calcul qui traverse toute + la chaîne flex/%/aspect-ratio jusqu'au canvas et redonne un résultat + légèrement différent à chaque changement de contenu du panneau (élément + sélectionné, grille affichée...) — d'où le canvas qui grandit/rétrécit + sans raison apparente à chaque interaction. "width:100%" donne une + taille définie à la place : la marge "auto" ne fait alors que centrer + l'espace restant une fois "max-width" atteint, comme voulu à l'origine. */ + width:100%; + max-width:1600px; +} .content-builder > .fieldRow:first-child{ flex:0 0 auto; } /* 3 colonnes : ajout d'éléments (gauche) / écran en grand (centre) / propriétés (droite) — @@ -92,7 +106,7 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d disponible), avec leur propre défilement interne si leur contenu dépasse. */ .builder3{ display:flex; gap:20px; align-items:stretch; margin-top:14px; flex:1 1 auto; min-height:0; } .builderPanel{ flex:0 0 260px; min-width:0; height:100%; overflow-y:auto; } -.builderPanelRight{ flex:0 0 320px; height:100%; overflow-y:auto; } +.builderPanelRight{ flex:0 0 320px; min-width:0; height:100%; overflow-y:auto; } .builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow-y:auto; display:flex; flex-direction:column; } .widgetGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }