Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Fix builder canvas resizing on element selection

Browse Source 
main.content (.content-builder) inherited "margin:0 auto" from the
base .content class. On this page body is a column flex container, so
that auto margin disabled cross-axis stretch and made the element
shrink-to-fit instead — sized via an algorithm that runs back down
through the flex/%/aspect-ratio chain to the canvas, and shifts
slightly whenever sibling panel content changes (e.g. selecting an
element). Give it an explicit width:100% so max-width/auto-margin
centering still work but sizing is stable and fills the available
space. Also add min-width:0 to .builderPanelRight, matching its
siblings, as defense against the same class of bug.

Verified with Playwright: canvas box was previously not filling
available width (918px expected vs 379px actual at a 1920px viewport)
and shifted between steps; both are fixed.
This commit is contained in:
william
2026-08-23 11:00:09 +02:00
parent 099c725df6
commit d86b1a60c7
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+16 -2
View File
@@ -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; }