From 9cfa9818f9d4b3056221d609afe85e2f839c89b1 Mon Sep 17 00:00:00 2001
From: xpltd <dev@xpltd.co>
Date: Sun, 22 Mar 2026 17:01:35 -0500
Subject: [PATCH] Fix paste broken by isAnalyzing + UI polish batch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Critical fix:
- Input field no longer disabled during URL analysis — the race condition
  fix (isAnalyzing=true on paste) was disabling the input mid-paste,
  causing the browser to drop the pasted text. Input now only disabled
  during submission.

UI polish:
- All action row elements standardized to 42px height
- Mobile toggle pills wider (min-width: 42px, matches gear icon)
- URL clear button (floating X) in the input field
- Footer visible in mobile view (padding above bottom nav)
- FormatPicker mobile: ellipsis on codec text, wrapped layout at narrow widths
---
 frontend/src/components/AppFooter.vue    |  6 ++
 frontend/src/components/FormatPicker.vue | 29 ++++++++-
 frontend/src/components/UrlInput.vue     | 76 +++++++++++++++++++-----
 3 files changed, 94 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/AppFooter.vue b/frontend/src/components/AppFooter.vue
index 95865ca..2999339 100644
--- a/frontend/src/components/AppFooter.vue
+++ b/frontend/src/components/AppFooter.vue
@@ -40,6 +40,12 @@ onMounted(async () => {
   opacity: 0.7;
 }
 
+@media (max-width: 767px) {
+  .app-footer {
+    padding-bottom: calc(var(--mobile-nav-height) + var(--space-md));
+  }
+}
+
 .sep {
   margin: 0 var(--space-sm);
   opacity: 0.5;
diff --git a/frontend/src/components/FormatPicker.vue b/frontend/src/components/FormatPicker.vue
index f63f0a9..31b65aa 100644
--- a/frontend/src/components/FormatPicker.vue
+++ b/frontend/src/components/FormatPicker.vue
@@ -144,6 +144,7 @@ function selectFormat(id: string | null): void {
   cursor: pointer;
   min-height: var(--touch-min);
   transition: background-color 0.15s ease;
+  gap: var(--space-sm);
 }
 
 .format-option:hover {
@@ -157,6 +158,10 @@ function selectFormat(id: string | null): void {
 
 .format-label {
   font-size: var(--font-size-base);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .format-hint {
@@ -165,9 +170,31 @@ function selectFormat(id: string | null): void {
 }
 
 .format-codecs {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   font-family: var(--font-mono);
+  white-space: nowrap;
+  flex-shrink: 0;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 540px) {
+  .format-option {
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  .format-label {
+    flex: 1 1 100%;
+    font-size: var(--font-size-sm);
+  }
+
+  .format-codecs {
+    font-size: 0.6875rem;
+    max-width: none;
+  }
 }
 
 .format-empty {
diff --git a/frontend/src/components/UrlInput.vue b/frontend/src/components/UrlInput.vue
index 643d1f4..05a0a69 100644
--- a/frontend/src/components/UrlInput.vue
+++ b/frontend/src/components/UrlInput.vue
@@ -299,16 +299,27 @@ function formatTooltip(fmt: string): string {
 
 <template>
   <div class="url-input">
-    <!-- URL field -->
-    <input
-      v-model="url"
-      type="url"
-      placeholder="Paste a URL to download…"
-      class="url-field"
-      @paste="handlePaste"
-      @keydown.enter="submitDownload"
-      :disabled="isAnalyzing || store.isSubmitting"
-    />
+    <!-- URL field with clear button -->
+    <div class="url-field-wrap">
+      <input
+        v-model="url"
+        type="url"
+        placeholder="Paste a URL to download…"
+        class="url-field"
+        @paste="handlePaste"
+        @keydown.enter="submitDownload"
+        :disabled="store.isSubmitting"
+      />
+      <button
+        v-if="url.trim()"
+        class="url-clear"
+        @click="url = ''"
+        title="Clear URL"
+        aria-label="Clear URL"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
 
     <!-- Action row: gear, media toggle, download button -->
     <div class="action-row">
@@ -456,15 +467,46 @@ function formatTooltip(fmt: string): string {
   width: 100%;
 }
 
+.url-field-wrap {
+  position: relative;
+  width: 100%;
+}
+
 .url-field {
   width: 100%;
   font-size: var(--font-size-base);
+  padding-right: 40px; /* room for clear button */
 }
 
-/* Action row: gear | toggle | download */
-.action-row {
+.url-clear {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  color: var(--color-text-muted);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.15s ease, color 0.15s ease;
+}
+
+.url-clear:hover {
+  opacity: 1;
+  color: var(--color-text);
+}
+
+/* Action row: gear | toggle | download — all 42px height */
+.action-row {
+  display: flex;
+  align-items: stretch;
   gap: var(--space-sm);
 }
 
@@ -472,8 +514,8 @@ function formatTooltip(fmt: string): string {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 38px;
-  height: 38px;
+  width: 42px;
+  min-height: 42px;
   padding: 0;
   flex-shrink: 0;
   background: var(--color-surface);
@@ -513,7 +555,7 @@ function formatTooltip(fmt: string): string {
   border: none;
   border-radius: 0;
   font-size: var(--font-size-sm);
-  min-height: 38px;
+  min-height: 42px;
   transition: all 0.15s ease;
 }
 
@@ -540,7 +582,7 @@ function formatTooltip(fmt: string): string {
   white-space: nowrap;
   padding: var(--space-sm) var(--space-lg);
   font-weight: 600;
-  min-height: 38px;
+  min-height: 42px;
   background: var(--color-accent);
   color: var(--color-bg);
 }
@@ -832,6 +874,8 @@ button:disabled {
 
   .toggle-pill {
     padding: var(--space-xs) var(--space-sm);
+    min-width: 42px;
+    justify-content: center;
   }
 }