From c2d61c96cd1bc20ac759a84ef78eeeb61420978a Mon Sep 17 00:00:00 2001
From: Steve Dogiakos <dogiakos@gmail.com>
Date: Wed, 1 Apr 2026 15:10:36 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20expand=20layout=20editor=20=E2=80=94=20?=
 =?UTF-8?q?full-screen,=20rulers,=20bottom=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Modal enlarged to min(1400px, 96vw) × 92vh
- Canvas fills full width; field controls moved to a strip below
- Inch rulers on top and left: major ticks at every inch (labeled),
  half-inch, quarter-inch, and eighth-inch subdivisions
- Layout editor button hidden on mobile/portrait screens (canvas
  requires landscape space to be usable)
---
 public/css/style.css | 21 ++++++++---
 public/index.html    | 84 +++++++++++++++++++++-----------------------
 public/js/app.js     | 58 +++++++++++++++++++++++++++---
 3 files changed, 112 insertions(+), 51 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 3724276..69ac8c4 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -88,10 +88,18 @@ header {
 }
 
 .modal-wide { width: min(720px, 96vw); }
-.modal-layout-editor { width: min(980px, 96vw); }
-.layout-editor-body { flex-direction: row !important; padding: 0 !important; gap: 0; overflow: hidden; min-height: 340px; }
-#layout-canvas-container { flex: 1; min-width: 0; padding: 12px; overflow: hidden; background: var(--bg); }
-#layout-sidebar { width: 200px; flex-shrink: 0; padding: 12px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; background: var(--surface); }
+.modal-layout-editor { width: min(1400px, 96vw); height: 92vh; }
+.layout-editor-body { flex: 1; min-height: 0; flex-direction: column !important; padding: 0 !important; gap: 0; overflow: hidden; }
+.layout-canvas-area { flex: 1; min-height: 0; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 24px 1fr; }
+.layout-ruler-corner { background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+#layout-ruler-top { background: var(--surface); border-bottom: 1px solid var(--border); overflow: hidden; }
+#layout-ruler-left { background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; }
+#layout-canvas-container { overflow: hidden; background: #d4d4d4; }
+.layout-controls { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
+.layout-coord { display: flex; align-items: center; gap: 4px; }
+.layout-coord label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; margin: 0; }
+.layout-coord input { width: 68px; }
+.layout-coord .frac { font-size: 11px; color: var(--text-muted); min-width: 28px; }
 
 .qbo-tabs {
   display: flex;
@@ -816,3 +824,8 @@ input[type="file"] {
   cursor: pointer;
 }
 .account-checkbox-label:hover { border-color: var(--primary); }
+
+/* Hide layout editor button on portrait/mobile — canvas needs landscape space */
+@media (max-width: 768px), (orientation: portrait) {
+  #btn-layout-editor { display: none !important; }
+}
diff --git a/public/index.html b/public/index.html
index f19f0ed..493002e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -752,62 +752,60 @@
       <button id="btn-close-layout-editor" class="btn-icon" title="Close">×</button>
     </div>
     <div class="modal-body layout-editor-body">
-      <div id="layout-canvas-container"><!-- SVG rendered by JS --></div>
-      <div id="layout-sidebar">
-        <div class="form-group">
-          <label for="layout-field-select">Field</label>
-          <select id="layout-field-select" style="font-size:12px"></select>
+      <!-- Canvas with rulers -->
+      <div class="layout-canvas-area">
+        <div class="layout-ruler-corner"></div>
+        <div id="layout-ruler-top"></div>
+        <div id="layout-ruler-left"></div>
+        <div id="layout-canvas-container"><!-- SVG rendered by JS --></div>
+      </div>
+      <!-- Controls strip -->
+      <div class="layout-controls">
+        <div class="layout-coord" style="gap:6px">
+          <label for="layout-field-select" style="font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-muted)">Field</label>
+          <select id="layout-field-select" style="font-size:12px;max-width:200px"></select>
         </div>
-        <label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer">
+        <label style="display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer;white-space:nowrap">
           <input type="checkbox" id="layout-field-visible"> Visible
         </label>
-        <div class="form-group">
-          <label for="layout-field-x">X Position</label>
-          <div style="display:flex;align-items:center;gap:6px">
-            <input type="number" id="layout-field-x" step="0.0625" min="0" max="8.5" style="width:72px">
-            <span id="layout-field-x-frac" style="font-size:11px;color:var(--text-muted)"></span>
-          </div>
+        <div style="width:1px;height:24px;background:var(--border)"></div>
+        <div class="layout-coord">
+          <label for="layout-field-x">X</label>
+          <input type="number" id="layout-field-x" step="0.0625" min="0" max="8.5">
+          <span class="frac" id="layout-field-x-frac"></span>
         </div>
-        <div class="form-group">
-          <label for="layout-field-y">Y Position</label>
-          <div style="display:flex;align-items:center;gap:6px">
-            <input type="number" id="layout-field-y" step="0.0625" min="0" max="3.5" style="width:72px">
-            <span id="layout-field-y-frac" style="font-size:11px;color:var(--text-muted)"></span>
-          </div>
+        <div class="layout-coord">
+          <label for="layout-field-y">Y</label>
+          <input type="number" id="layout-field-y" step="0.0625" min="0" max="3.5">
+          <span class="frac" id="layout-field-y-frac"></span>
         </div>
-        <div id="layout-end-pos-group" hidden>
-          <div class="form-group">
+        <div id="layout-end-pos-group" style="display:contents" hidden>
+          <div class="layout-coord">
             <label for="layout-field-x2">End X</label>
-            <div style="display:flex;align-items:center;gap:6px">
-              <input type="number" id="layout-field-x2" step="0.0625" min="0" max="8.5" style="width:72px">
-              <span id="layout-field-x2-frac" style="font-size:11px;color:var(--text-muted)"></span>
-            </div>
+            <input type="number" id="layout-field-x2" step="0.0625" min="0" max="8.5">
+            <span class="frac" id="layout-field-x2-frac"></span>
           </div>
-          <div class="form-group">
+          <div class="layout-coord">
             <label for="layout-field-y2">End Y</label>
-            <div style="display:flex;align-items:center;gap:6px">
-              <input type="number" id="layout-field-y2" step="0.0625" min="0" max="3.5" style="width:72px">
-              <span id="layout-field-y2-frac" style="font-size:11px;color:var(--text-muted)"></span>
-            </div>
+            <input type="number" id="layout-field-y2" step="0.0625" min="0" max="3.5">
+            <span class="frac" id="layout-field-y2-frac"></span>
           </div>
         </div>
-        <div>
-          <div style="font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px">Nudge ¹⁄₁₆"</div>
-          <div style="display:grid;grid-template-columns:repeat(3,28px);grid-template-rows:repeat(3,28px);gap:3px;justify-content:center">
-            <span></span>
-            <button id="nudge-up"    class="btn-sm btn-secondary" style="padding:0;text-align:center">↑</button>
-            <span></span>
-            <button id="nudge-left"  class="btn-sm btn-secondary" style="padding:0;text-align:center">←</button>
-            <span></span>
-            <button id="nudge-right" class="btn-sm btn-secondary" style="padding:0;text-align:center">→</button>
-            <span></span>
-            <button id="nudge-down"  class="btn-sm btn-secondary" style="padding:0;text-align:center">↓</button>
+        <div style="width:1px;height:24px;background:var(--border)"></div>
+        <!-- Nudge cross -->
+        <div style="display:flex;flex-direction:column;align-items:center;gap:2px">
+          <div style="font-size:10px;text-transform:uppercase;color:var(--text-muted);letter-spacing:.04em">¹⁄₁₆"</div>
+          <div style="display:grid;grid-template-columns:repeat(3,22px);grid-template-rows:repeat(3,22px);gap:2px">
+            <span></span><button id="nudge-up"    class="btn-sm btn-secondary" style="padding:0;display:flex;align-items:center;justify-content:center">↑</button><span></span>
+            <button id="nudge-left"  class="btn-sm btn-secondary" style="padding:0;display:flex;align-items:center;justify-content:center">←</button>
             <span></span>
+            <button id="nudge-right" class="btn-sm btn-secondary" style="padding:0;display:flex;align-items:center;justify-content:center">→</button>
+            <span></span><button id="nudge-down"  class="btn-sm btn-secondary" style="padding:0;display:flex;align-items:center;justify-content:center">↓</button><span></span>
           </div>
         </div>
-        <div id="layout-save-status" style="font-size:11px;color:var(--text-muted);text-align:center;min-height:14px"></div>
-        <div style="margin-top:auto;padding-top:8px;border-top:1px solid var(--border)">
-          <button id="btn-layout-reset" class="btn-secondary btn-sm" style="width:100%;font-size:11px" data-admin-only>↺ Reset to Default</button>
+        <div id="layout-save-status" style="font-size:11px;color:var(--text-muted);min-width:56px"></div>
+        <div style="margin-left:auto">
+          <button id="btn-layout-reset" class="btn-secondary btn-sm" data-admin-only>↺ Reset to Default</button>
         </div>
       </div>
     </div>
diff --git a/public/js/app.js b/public/js/app.js
index f0754f2..4ed48c9 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1938,7 +1938,7 @@ function svgEl(tag, attrs, text) {
 
 function renderLayoutCanvas() {
   const container = document.getElementById('layout-canvas-container');
-  const W = container.offsetWidth - 24;
+  const W = container.offsetWidth;
   if (W <= 0) return;
   const SCALE = W / 8.5;
   layoutState.scale = SCALE;
@@ -1947,13 +1947,13 @@ function renderLayoutCanvas() {
   container.innerHTML = '';
   const svg = svgEl('svg', { width: W, height: H, style: 'display:block;user-select:none' });
 
-  // Check boundary and background
-  svg.appendChild(svgEl('rect', { x:0, y:0, width:W, height:H, fill:'#fff', stroke:'#ccc', 'stroke-width':1 }));
+  // White check background
+  svg.appendChild(svgEl('rect', { x:0, y:0, width:W, height:H, fill:'#fff', stroke:'#bbb', 'stroke-width':1 }));
 
   // MICR reference line
   const micrY = (3.5 - 0.267) * SCALE;
   svg.appendChild(svgEl('line', { x1:0, y1:micrY, x2:W, y2:micrY, stroke:'#ccc', 'stroke-width':1, 'stroke-dasharray':'4,4' }));
-  svg.appendChild(svgEl('text', { x:4, y:micrY - 3, 'font-size':8, fill:'#bbb', 'font-family':'sans-serif' }, 'MICR'));
+  svg.appendChild(svgEl('text', { x:4, y:micrY - 3, 'font-size':9, fill:'#bbb', 'font-family':'sans-serif' }, 'MICR'));
 
   for (const f of layoutState.fields) {
     const g = createFieldSvgElement(f, SCALE, layoutState.selectedId === f.id);
@@ -1962,6 +1962,56 @@ function renderLayoutCanvas() {
   }
 
   container.appendChild(svg);
+  renderRulers(W, H, SCALE);
+}
+
+function renderRulers(W, H, scale) {
+  const RULER = 24;
+  const topEl  = document.getElementById('layout-ruler-top');
+  const leftEl = document.getElementById('layout-ruler-left');
+  if (!topEl || !leftEl) return;
+
+  // ── Horizontal ruler (top) ──────────────────────────────────────
+  const topSvg = svgEl('svg', { width: W, height: RULER, style: 'display:block' });
+  topSvg.appendChild(svgEl('rect', { x:0, y:0, width:W, height:RULER, fill:'var(--surface)' }));
+
+  for (let n8 = 0; n8 <= Math.ceil(8.5 * 8); n8++) {
+    const inches = n8 / 8;
+    if (inches > 8.5) break;
+    const x = inches * scale;
+    const isInch = n8 % 8 === 0;
+    const isHalf = n8 % 4 === 0;
+    const isQtr  = n8 % 2 === 0;
+    const tickH  = isInch ? RULER - 2 : isHalf ? 14 : isQtr ? 9 : 5;
+    topSvg.appendChild(svgEl('line', { x1:x, y1:RULER, x2:x, y2:RULER - tickH, stroke:'#999', 'stroke-width': isInch ? 1 : 0.5 }));
+    if (isInch && inches > 0) {
+      topSvg.appendChild(svgEl('text', { x:x + 2, y:RULER - tickH - 1, 'font-size':8, fill:'#666', 'font-family':'sans-serif' }, inches + '"'));
+    }
+  }
+  topEl.innerHTML = '';
+  topEl.appendChild(topSvg);
+
+  // ── Vertical ruler (left) ───────────────────────────────────────
+  const leftSvg = svgEl('svg', { width: RULER, height: H, style: 'display:block' });
+  leftSvg.appendChild(svgEl('rect', { x:0, y:0, width:RULER, height:H, fill:'var(--surface)' }));
+
+  for (let n8 = 0; n8 <= Math.ceil(3.5 * 8); n8++) {
+    const inches = n8 / 8;
+    if (inches > 3.5) break;
+    const y = inches * scale;
+    const isInch = n8 % 8 === 0;
+    const isHalf = n8 % 4 === 0;
+    const isQtr  = n8 % 2 === 0;
+    const tickW  = isInch ? RULER - 2 : isHalf ? 14 : isQtr ? 9 : 5;
+    leftSvg.appendChild(svgEl('line', { x1:RULER, y1:y, x2:RULER - tickW, y2:y, stroke:'#999', 'stroke-width': isInch ? 1 : 0.5 }));
+    if (isInch && inches > 0) {
+      const t = svgEl('text', { 'font-size':8, fill:'#666', 'font-family':'sans-serif',
+        'text-anchor':'end', x: RULER - tickW - 2, y: y + 3 }, inches + '"');
+      leftSvg.appendChild(t);
+    }
+  }
+  leftEl.innerHTML = '';
+  leftEl.appendChild(leftSvg);
 }
 
 function createFieldSvgElement(f, scale, selected) {