fix(cropper): responsive editor layout

Two-column editor at >=900px (crop pad + cleaned preview left, cleaning/
review controls right), single column below; panel headers wrap their
hints onto their own line on narrow screens.

tools/public/assets/cropper/index.html

@@ -78,24 +78,25 @@
         </div>
       </dl>
 
-      <div class="finger-grid mt-2">
+      <div class="editor-grid mt-2">
-        <div>
+        <div class="editor-media">
           <label>Original — crop it</label>
           <div class="croppa-pad mt-1">
             <croppa v-model="myCroppa" :show-remove-button="false" :width="250" :height="267.44" :quality="2">
               <img slot="initial" crossOrigin="anonymous" :src="message.message.file_url" style="width: 300px">
             </croppa>
           </div>
-        </div>
+          <template v-if="cleanedImage">
-        <div v-if="cleanedImage">
+            <label style="display:block;" class="mt-2">Cleaned preview</label>
-          <label>Cleaned preview</label>
             <div class="croppa-pad mt-1">
               <img :src="cleanedImage" alt="cleaned preview">
             </div>
-        </div>
+            <button class="btn btn-danger-ghost mt-1" v-on:click="cleanedImage = null">Remove cleaned image</button>
+          </template>
         </div>
 
-      <div class="row-gap mt-2" style="align-items:flex-end;">
+        <div class="editor-controls">
+          <div class="row-gap" style="align-items:flex-end;">
             <div style="min-width:200px;">
               <label for="requiresCleaning">Requires cleaning?</label>
               <select id="requiresCleaning" class="form-control" v-model="requiresCleaning">
@@ -108,7 +109,6 @@
               <span v-if="!busy.clean">Clean background</span>
               <span v-else>Cleaning&hellip;</span>
             </button>
-        <button class="btn btn-danger-ghost" v-if="cleanedImage" v-on:click="cleanedImage = null">Remove cleaned image</button>
           </div>
 
           <hr class="mt-2">
@@ -153,6 +153,8 @@
               <button class="btn btn-ghost" v-on:click="reviewed = false">Change review</button>
             </div>
           </div>
+        </div>
+      </div>
     </section>
   </main>
 

tools/public/assets/style.css

@@ -169,6 +169,17 @@ select.form-control { appearance: auto; }
 /* ── alerts ─────────────────────────────────────────────── */
 .alert-soft { border-radius: 10px; border: 1px solid var(--err-soft); background: var(--err-soft); color: var(--err); font-size: 13.5px; padding: 0.6rem 0.9rem; }
 
+/* ── editor grid (cropper) ──────────────────────────────── */
+.editor-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
+@media (min-width: 900px) {
+  .editor-grid { grid-template-columns: 300px 1fr; align-items: start; }
+}
+.panel-head { flex-wrap: wrap; }
+.panel-head .hint { flex-basis: 100%; margin-left: 0; }
+@media (min-width: 720px) {
+  .panel-head .hint { flex-basis: auto; margin-left: auto; }
+}
+
 /* ── footer ─────────────────────────────────────────────── */
 footer.foot { flex-shrink: 0; padding: 1.4rem 0 1.8rem; color: var(--faint); font-size: 12.5px; }
 footer.foot .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }