From 3e2f7a9afebe824cdd77f0055faf2b1c793c4e38 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Mon, 23 Mar 2026 02:37:55 +0000
Subject: [PATCH] =?UTF-8?q?Fix:=20home=20page=20editor=20=E2=80=94=20stack?=
 =?UTF-8?q?ed=20layout=20shows=20all=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Steps/checklist/links were cramming 3+ inputs in one row,
truncating content. Now emoji+title+buttons on row 1,
description on row 2. All content visible.
---
 public/customize.js | 39 +++++++++++++++++++++++----------------
 public/index.html   |  2 +-
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/public/customize.js b/public/customize.js
index 252e9e36..06571732 100644
--- a/public/customize.js
+++ b/public/customize.js
@@ -298,11 +298,12 @@
       .cust-color-row .cust-reset-btn:hover { background: var(--surface-3); }
       .cust-node-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; }
       .cust-preview-img { max-width: 200px; max-height: 60px; margin-top: 6px; border-radius: 6px; border: 1px solid var(--border); }
-      .cust-list-item { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; padding: 8px;
+      .cust-list-item { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding: 8px;
         background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; }
-      .cust-list-item input { flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px;
-        font-size: 13px; background: var(--input-bg); color: var(--text); }
-      .cust-list-item .cust-emoji-input { max-width: 50px; text-align: center; }
+      .cust-list-row { display: flex; gap: 6px; align-items: center; }
+      .cust-list-item input { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px;
+        font-size: 12px; background: var(--input-bg); color: var(--text); min-width: 0; }
+      .cust-list-item .cust-emoji-input { max-width: 40px; text-align: center; flex: 0 0 40px; }
       .cust-list-btn { padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2);
         color: var(--text-muted); cursor: pointer; font-size: 12px; }
       .cust-list-btn:hover { background: var(--surface-3); }
@@ -452,28 +453,34 @@
     var h = state.home;
     var stepsHtml = h.steps.map(function (s, i) {
       return '<div class="cust-list-item" data-step="' + i + '">' +
-        '<input class="cust-emoji-input" data-step-field="emoji" data-idx="' + i + '" value="' + escAttr(s.emoji) + '" placeholder="📡">' +
-        '<input data-step-field="title" data-idx="' + i + '" value="' + escAttr(s.title) + '" placeholder="Title">' +
-        '<input data-step-field="description" data-idx="' + i + '" value="' + escAttr(s.description) + '" placeholder="Description" style="flex:2">' +
-        '<button class="cust-list-btn" data-move-step="' + i + '" data-dir="up" title="Move up">↑</button>' +
-        '<button class="cust-list-btn" data-move-step="' + i + '" data-dir="down" title="Move down">↓</button>' +
-        '<button class="cust-list-btn danger" data-rm-step="' + i + '" title="Remove">✕</button>' +
+        '<div class="cust-list-row">' +
+          '<input class="cust-emoji-input" data-step-field="emoji" data-idx="' + i + '" value="' + escAttr(s.emoji) + '" placeholder="📡">' +
+          '<input data-step-field="title" data-idx="' + i + '" value="' + escAttr(s.title) + '" placeholder="Title">' +
+          '<button class="cust-list-btn" data-move-step="' + i + '" data-dir="up" title="Move up">↑</button>' +
+          '<button class="cust-list-btn" data-move-step="' + i + '" data-dir="down" title="Move down">↓</button>' +
+          '<button class="cust-list-btn danger" data-rm-step="' + i + '" title="Remove">✕</button>' +
+        '</div>' +
+        '<input data-step-field="description" data-idx="' + i + '" value="' + escAttr(s.description) + '" placeholder="Description">' +
       '</div>';
     }).join('');
 
     var checkHtml = h.checklist.map(function (c, i) {
       return '<div class="cust-list-item" data-check="' + i + '">' +
-        '<input data-check-field="question" data-idx="' + i + '" value="' + escAttr(c.question) + '" placeholder="Question">' +
-        '<input data-check-field="answer" data-idx="' + i + '" value="' + escAttr(c.answer) + '" placeholder="Answer" style="flex:2">' +
-        '<button class="cust-list-btn danger" data-rm-check="' + i + '" title="Remove">✕</button>' +
+        '<div class="cust-list-row">' +
+          '<input data-check-field="question" data-idx="' + i + '" value="' + escAttr(c.question) + '" placeholder="Question">' +
+          '<button class="cust-list-btn danger" data-rm-check="' + i + '" title="Remove">✕</button>' +
+        '</div>' +
+        '<input data-check-field="answer" data-idx="' + i + '" value="' + escAttr(c.answer) + '" placeholder="Answer">' +
       '</div>';
     }).join('');
 
     var linksHtml = h.footerLinks.map(function (l, i) {
       return '<div class="cust-list-item" data-link="' + i + '">' +
-        '<input data-link-field="label" data-idx="' + i + '" value="' + escAttr(l.label) + '" placeholder="Label">' +
-        '<input data-link-field="url" data-idx="' + i + '" value="' + escAttr(l.url) + '" placeholder="URL" style="flex:2">' +
-        '<button class="cust-list-btn danger" data-rm-link="' + i + '" title="Remove">✕</button>' +
+        '<div class="cust-list-row">' +
+          '<input data-link-field="label" data-idx="' + i + '" value="' + escAttr(l.label) + '" placeholder="Label">' +
+          '<button class="cust-list-btn danger" data-rm-link="' + i + '" title="Remove">✕</button>' +
+        '</div>' +
+        '<input data-link-field="url" data-idx="' + i + '" value="' + escAttr(l.url) + '" placeholder="URL">' +
       '</div>';
     }).join('');
 
diff --git a/public/index.html b/public/index.html
index 0aa57ccc..2fe7b5c9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -101,6 +101,6 @@
   <script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="perf.js?v=1773985649" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="customize.js?v=1774233307" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="customize.js?v=1774233475" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
 </html>