Feb 27 2026: optimize for iPad

app/templates/templates/form_editor.html

@@ -294,6 +294,65 @@
     transform: rotate(-2deg); white-space: nowrap; display: none;
   }
 
+
+  /* ── iPad / touch-device overrides for the form editor ── */
+  @media (max-width: 1194px) {
+    /* Collapse 3-column layout: stack palette / canvas / props vertically */
+    .editor-shell {
+      grid-template-columns: 1fr !important;
+      grid-template-rows: 52px auto auto auto !important;
+      height: auto !important;
+    }
+
+    /* Palette becomes a horizontal scrollable strip */
+    .palette {
+      grid-column: 1 !important;
+      display: flex;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      padding: .5rem .6rem;
+      gap: .3rem;
+      max-height: 60px;
+      align-items: center;
+    }
+    .pal-head { display: none; } /* hide category headers in horizontal mode */
+    .pal-item { flex-shrink: 0; padding: .35rem .6rem; }
+
+    /* Canvas takes full width */
+    .canvas-wrap {
+      grid-column: 1 !important;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    /* Props panel full width below canvas */
+    .props-panel {
+      grid-column: 1 !important;
+      max-height: 50vh;
+      overflow-y: auto;
+    }
+
+    /* Topbar wraps */
+    .topbar {
+      flex-wrap: wrap;
+      height: auto !important;
+      padding: .5rem;
+      gap: .4rem;
+    }
+
+    /* Touch-friendly palette items */
+    .pal-item {
+      min-height: 44px;
+    }
+
+    /* Touch-friendly toolbar buttons */
+    .tbtn {
+      min-height: 44px;
+      padding: .45rem .85rem;
+    }
+  }
+
   /* scrollbars */
   .palette::-webkit-scrollbar,
   .canvas-wrap::-webkit-scrollbar,

app/templates/templates/form_preview.html

@@ -37,6 +37,7 @@
     border-radius: 0 0 12px 12px;
     padding: 1.75rem;
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
   }
 
   /* 12-col grid — same columns as editor, rows shrink to content in preview */
@@ -48,6 +49,16 @@
     width: max-content;
   }
 
+  /* —— iPad / touch-device fluid grid override —— */
+  @media (max-width: 1194px) {
+    .form-grid {
+      --_cell: calc((min(calc(100vw - 2rem), 900px) - 11 * 8px) / 12);
+      grid-template-columns: repeat(12, var(--_cell));
+      width: 100%;
+    }
+    .preview-body { padding: 1rem; }
+  }
+
   /* ── Cell ── */
   .fg-cell {
     overflow: hidden;