fix: overlay field rows shrink to content width (#219)

The data-row styling forced `min-width:140px; flex:0 1 auto`, which
left empty space inside every row even for short values like "20" or
"euler". Switch to `min-width:0; flex:0 0 auto` so each row sizes to
its content. Applied to both copies of the `section()` helper (combo
panel + single-panel layout).

Closes #219
This commit is contained in:
Mehdi Chaid
2026-05-20 18:37:45 -04:00
parent e6e2db6d34
commit 2c75c15de7
+2 -2
View File
@@ -365,7 +365,7 @@ export function openGenerationDataOverlay(model, lastImagesByCombo) {
css(list, "display:flex;flex-wrap:wrap;gap:6px;");
for (const [k, v] of rows) {
const row = document.createElement("div");
css(row, "background:#181818;border:1px solid #333;border-radius:6px;padding:6px 8px;flex:0 1 auto;min-width:140px;max-width:100%;box-sizing:border-box;");
css(row, "background:#181818;border:1px solid #333;border-radius:6px;padding:6px 8px;flex:0 0 auto;min-width:0;max-width:100%;box-sizing:border-box;");
const ke = document.createElement("div");
ke.textContent = k;
css(ke, "font-size:10px;color:#888;margin-bottom:2px;");
@@ -486,7 +486,7 @@ export function openGenerationDataOverlay(model, lastImagesByCombo) {
css(list, "display:flex;flex-wrap:wrap;gap:6px;");
for (const [k, v] of rows) {
const row = document.createElement("div");
css(row, "background:#181818;border:1px solid #333;border-radius:6px;padding:6px 8px;flex:0 1 auto;min-width:140px;max-width:100%;box-sizing:border-box;");
css(row, "background:#181818;border:1px solid #333;border-radius:6px;padding:6px 8px;flex:0 0 auto;min-width:0;max-width:100%;box-sizing:border-box;");
const ke = document.createElement("div");
ke.textContent = k;
css(ke, "font-size:10px;color:#888;margin-bottom:2px;");