fix(frontend): group source and result panels for responsive layout

index.html

@@ -103,11 +103,21 @@
     min-height: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto 1fr auto;
     border-bottom: 1px solid var(--rule);
   }
+
+  .panel {
+    min-width: 0;
+    min-height: 0;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+  }
+
+  .panel.right {
+    border-left: 1px solid var(--rule);
+  }
+
   .cell { padding: 0 28px; min-width: 0; min-height: 0; }
-  .cell.right { border-left: 1px solid var(--rule); }
 
   .cell.head {
     padding-top: 14px; padding-bottom: 8px;
@@ -261,14 +271,28 @@
     body { overflow: auto; }
     .hero { padding: 12px 18px; gap: 8px; }
     .hero p { margin-left: 0; }
+
     main {
       grid-template-columns: 1fr;
-      grid-template-rows: auto auto auto auto auto auto;
     }
-    .cell.right { border-left: 0; border-top: 1px solid var(--rule); }
-    .cell.head.right { padding-top: 12px; }
-    .cell.frame-cell { min-height: 280px; }
-    .nav, .cell, footer { padding-left: 18px; padding-right: 18px; }
+
+    .panel.right {
+      border-left: 0;
+      border-top: 1px solid var(--rule);
+    }
+
+    .cell.head.right {
+      padding-top: 12px;
+    }
+
+    .cell.frame-cell {
+      min-height: 280px;
+    }
+
+    .nav, .cell, footer {
+      padding-left: 18px;
+      padding-right: 18px;
+    }
   }
 </style>
 </head>
@@ -286,53 +310,57 @@
 </header>
 
 <main>
-  <!-- heads -->
-  <div class="cell head left">
-    <span class="panel-num">01 / Source</span>
-    <span class="panel-title">your photo</span>
-  </div>
-  <div class="cell head right">
-    <span class="panel-num">02 / Result</span>
-    <span class="panel-title">the edit</span>
-  </div>
-
-  <!-- frames -->
-  <div class="cell frame-cell left">
-    <div class="frame dashed" id="drop">
-      <div class="placeholder" id="placeholder">
-        <div class="glyph">+</div>
-        <div class="small"><b>Click</b> or <b>drop</b> a photo here · JPG · PNG · WEBP</div>
+  <section class="panel left">
+    <div class="cell head left">
+      <span class="panel-num">01 / Source</span>
+      <span class="panel-title">your photo</span>
+    </div>
+
+    <div class="cell frame-cell left">
+      <div class="frame dashed" id="drop">
+        <div class="placeholder" id="placeholder">
+          <div class="glyph">+</div>
+          <div class="small"><b>Click</b> or <b>drop</b> a photo here · JPG · PNG · WEBP</div>
+        </div>
+        <img id="preview" hidden alt="">
       </div>
-      <img id="preview" hidden alt="">
+      <input type="file" id="file" accept="image/*" hidden>
     </div>
-    <input type="file" id="file" accept="image/*" hidden>
-  </div>
-  <div class="cell frame-cell right">
-    <div class="frame" id="out">
-      <span class="empty" id="empty">Output will appear here</span>
-      <img id="result" hidden alt="">
-      <div class="loader" id="loader" hidden><span class="bar"></span>Editing</div>
+
+    <div class="cell controls left">
+      <textarea id="prompt" placeholder="convert to black and white with grain, replace background with a misty forest, transform into a 1990s polaroid..."></textarea>
+      <div class="controls-row">
+        <div class="presets" id="presets">
+          <button class="preset" type="button" data-p="Convert it to black and white with subtle film grain.">B&amp;W film</button>
+          <button class="preset" type="button" data-p="Transform the image into a soft watercolor painting.">Watercolor</button>
+          <button class="preset" type="button" data-p="Cinematic polaroid with soft grain, subtle vignette, gentle lighting, white frame, preserving realistic texture.">Polaroid</button>
+          <button class="preset" type="button" data-p="Convert into a clean line-art ink drawing on white paper.">Line art</button>
+        </div>
+        <button id="go" class="go" disabled>Run edit</button>
+      </div>
+    </div>
+  </section>
+
+  <section class="panel right">
+    <div class="cell head right">
+      <span class="panel-num">02 / Result</span>
+      <span class="panel-title">the edit</span>
     </div>
-  </div>
-
-  <!-- controls / meta -->
-  <div class="cell controls left">
-    <textarea id="prompt" placeholder="convert to black and white with grain, replace background with a misty forest, transform into a 1990s polaroid..."></textarea>
-    <div class="controls-row">
-      <div class="presets" id="presets">
-        <button class="preset" type="button" data-p="Convert it to black and white with subtle film grain.">B&amp;W film</button>
-        <button class="preset" type="button" data-p="Transform the image into a soft watercolor painting.">Watercolor</button>
-        <button class="preset" type="button" data-p="Cinematic polaroid with soft grain, subtle vignette, gentle lighting, white frame, preserving realistic texture.">Polaroid</button>
-        <button class="preset" type="button" data-p="Convert into a clean line-art ink drawing on white paper.">Line art</button>
+
+    <div class="cell frame-cell right">
+      <div class="frame" id="out">
+        <span class="empty" id="empty">Output will appear here</span>
+        <img id="result" hidden alt="">
+        <div class="loader" id="loader" hidden><span class="bar"></span>Editing</div>
       </div>
-      <button id="go" class="go" disabled>Run edit</button>
     </div>
-  </div>
-  <div class="cell meta-cell right">
-    <a href="#" id="download" hidden>Download PNG</a>
-    <span class="meta-empty" id="meta-empty">Upload a photo to begin</span>
-    <span class="seed" id="seed"></span>
-  </div>
+
+    <div class="cell meta-cell right">
+      <a href="#" id="download" hidden>Download PNG</a>
+      <span class="meta-empty" id="meta-empty">Upload a photo to begin</span>
+      <span class="seed" id="seed"></span>
+    </div>
+  </section>
 </main>
 
 <footer>
@@ -442,4 +470,4 @@
 </script>
 
 </body>
-</html>
+</html>