From 7e9f1277d4d76b47ab4622ea8831228f42961d26 Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zacgaetano@Zacs-M3-Max-128gb.local>
Date: Thu, 28 May 2026 23:13:15 -0400
Subject: [PATCH] fix(uxp-panel): rebuild Export & Conform panel - declutter +
 fix overlap

The preset cards overlapped the codec/quality dropdowns because the
2-column .preset-grid used flex-wrap, and UXP miscomputes wrapped-flex
container height (collapses to ~0), so the fields below rendered on top.

Rethink:
- Presets are now a single-column list (title left, spec right); no
  flex-wrap, so nothing collapses or overlaps.
- Progressive disclosure: the Codec/Quality/Resolution/Audio dropdowns
  are wrapped in #conform-custom and hidden unless the Custom preset is
  chosen. Default view is just Target project + 4 format rows.

The preset->select value contract is unchanged; presets still populate
the (now hidden) selects that Start Conform reads.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 services/premiere-plugin-uxp/index.html  | 69 ++++++++++++------------
 services/premiere-plugin-uxp/src/main.js |  2 +
 services/premiere-plugin-uxp/styles.css  | 19 ++++---
 3 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/services/premiere-plugin-uxp/index.html b/services/premiere-plugin-uxp/index.html
index 3601298..586f2f8 100644
--- a/services/premiere-plugin-uxp/index.html
+++ b/services/premiere-plugin-uxp/index.html
@@ -176,40 +176,43 @@
     <div class="slide-body">
       <label class="field-label">Target project</label>
       <select id="conform-proj-select"><option value="">— Select project —</option></select>
-      <label class="field-label">Preset</label>
-      <div id="preset-cards" class="preset-grid">
-        <div class="preset-card selected" data-preset="broadcast"><div class="pc-title">Broadcast</div><div class="pc-desc">ProRes 422 HQ · 1080p · 48kHz</div></div>
-        <div class="preset-card" data-preset="web"><div class="pc-title">Web</div><div class="pc-desc">H.264 · 1080p · AAC 320k</div></div>
-        <div class="preset-card" data-preset="archive"><div class="pc-title">Archive</div><div class="pc-desc">ProRes 4444 · UHD · 48kHz</div></div>
-        <div class="preset-card" data-preset="custom"><div class="pc-title">Custom</div><div class="pc-desc">Manual settings</div></div>
+      <label class="field-label">Format</label>
+      <div id="preset-cards" class="preset-list">
+        <div class="preset-card selected" data-preset="broadcast"><span class="pc-title">Broadcast</span><span class="pc-desc">ProRes 422 HQ · 1080p</span></div>
+        <div class="preset-card" data-preset="web"><span class="pc-title">Web</span><span class="pc-desc">H.264 · 1080p · AAC</span></div>
+        <div class="preset-card" data-preset="archive"><span class="pc-title">Archive</span><span class="pc-desc">ProRes 4444 · UHD</span></div>
+        <div class="preset-card" data-preset="custom"><span class="pc-title">Custom</span><span class="pc-desc">Manual settings</span></div>
+      </div>
+
+      <div id="conform-custom" class="custom-fields hidden">
+        <label class="field-label">Codec</label>
+        <select id="conform-codec">
+          <option value="prores_hq">ProRes 422 HQ</option>
+          <option value="prores_4444">ProRes 4444</option>
+          <option value="h264">H.264</option>
+          <option value="h265">H.265 / HEVC</option>
+          <option value="dnxhr_hq">DNxHR HQ</option>
+        </select>
+        <label class="field-label">Quality</label>
+        <select id="conform-quality">
+          <option value="high">High</option>
+          <option value="medium" selected>Medium</option>
+          <option value="low">Low</option>
+        </select>
+        <label class="field-label">Resolution</label>
+        <select id="conform-resolution">
+          <option value="uhd">UHD (3840×2160)</option>
+          <option value="1080p" selected>Full HD (1920×1080)</option>
+          <option value="720p">HD (1280×720)</option>
+          <option value="source">Source</option>
+        </select>
+        <label class="field-label">Audio</label>
+        <select id="conform-audio">
+          <option value="broadcast">Broadcast (48kHz PCM)</option>
+          <option value="web">Web (AAC 320k)</option>
+          <option value="archive">Archive (96kHz PCM)</option>
+        </select>
       </div>
-      <label class="field-label">Codec</label>
-      <select id="conform-codec">
-        <option value="prores_hq">ProRes 422 HQ</option>
-        <option value="prores_4444">ProRes 4444</option>
-        <option value="h264">H.264</option>
-        <option value="h265">H.265 / HEVC</option>
-        <option value="dnxhr_hq">DNxHR HQ</option>
-      </select>
-      <label class="field-label">Quality</label>
-      <select id="conform-quality">
-        <option value="high">High</option>
-        <option value="medium" selected>Medium</option>
-        <option value="low">Low</option>
-      </select>
-      <label class="field-label">Resolution</label>
-      <select id="conform-resolution">
-        <option value="uhd">UHD (3840×2160)</option>
-        <option value="1080p" selected>Full HD (1920×1080)</option>
-        <option value="720p">HD (1280×720)</option>
-        <option value="source">Source</option>
-      </select>
-      <label class="field-label">Audio</label>
-      <select id="conform-audio">
-        <option value="broadcast">Broadcast (48kHz PCM)</option>
-        <option value="web">Web (AAC 320k)</option>
-        <option value="archive">Archive (96kHz PCM)</option>
-      </select>
       <div id="conform-clip-info" class="clip-info"></div>
     </div>
     <div class="slide-footer">
diff --git a/services/premiere-plugin-uxp/src/main.js b/services/premiere-plugin-uxp/src/main.js
index 71862bf..cfdd21d 100644
--- a/services/premiere-plugin-uxp/src/main.js
+++ b/services/premiere-plugin-uxp/src/main.js
@@ -410,6 +410,8 @@
       };
       const p = presets[card.dataset.preset];
       if (p) { $('conform-codec').value=p.codec; $('conform-quality').value=p.quality; $('conform-resolution').value=p.resolution; $('conform-audio').value=p.audio; }
+      // Manual codec/quality/res/audio fields appear only for Custom.
+      UI.setHidden('#conform-custom', card.dataset.preset !== 'custom');
     });
     $('conform-start-btn').addEventListener('click', async () => {
       if (!_seqCache) return;
diff --git a/services/premiere-plugin-uxp/styles.css b/services/premiere-plugin-uxp/styles.css
index 43b3a2a..54fabbd 100644
--- a/services/premiere-plugin-uxp/styles.css
+++ b/services/premiere-plugin-uxp/styles.css
@@ -587,21 +587,26 @@ input[type="search"]::-webkit-search-cancel-button { display: none; }
 }
 .slide-footer .btn { flex: 1; padding: 9px; }
 
-/* ── preset cards ───────────────────────────────────────────────── */
-.preset-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
+/* ── preset list ────────────────────────────────────────────────── */
+/* Single column (no flex-wrap): UXP miscomputes wrapped-flex height, which
+   collapsed the old 2-col grid and let the fields below overlap it. */
+.preset-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 2px; }
 .preset-card {
-  flex: 0 0 calc(50% - 3px);
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
   background: var(--bg-base);
   border: 1px solid var(--border-faint);
   border-radius: 7px;
-  padding: 8px 10px;
+  padding: 9px 11px;
   cursor: pointer;
-  transition: border-color var(--t-fast) var(--ease);
+  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
 }
 .preset-card:hover { border-color: var(--border-strong); }
 .preset-card.selected { border-color: var(--accent); background: var(--accent-subtle); }
-.pc-title { font: 700 11.5px/1.2 var(--font-sans); color: var(--text-1); }
-.pc-desc  { font: 400 10px/1.3 var(--font-sans); color: var(--text-3); margin-top: 3px; }
+.pc-title { font: 700 11.5px/1.2 var(--font-sans); color: var(--text-1); flex-shrink: 0; }
+.pc-desc  { font: 400 10px/1.3 var(--font-mono); color: var(--text-3); margin-left: auto; text-align: right; }
+.custom-fields.hidden { display: none; }
 
 /* ── clip info / list (relink) ──────────────────────────────────── */
 .clip-info { font-size: 11px; color: var(--text-2); padding: 6px 0 2px; }