Improve translated search flow and modal layout

frontend/index.html

@@ -70,7 +70,7 @@
     </main>
 
     <div id="previewModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/80 px-4">
-      <div class="w-full max-w-4xl rounded-3xl border border-white/10 bg-zinc-950 p-5 shadow-2xl">
+      <div class="w-full max-w-5xl rounded-3xl border border-white/10 bg-zinc-950 p-5 shadow-2xl">
         <div class="flex items-start justify-between gap-4">
           <div>
             <p class="text-xs uppercase tracking-[0.3em] text-zinc-500">Download Preview</p>
@@ -78,12 +78,12 @@
           </div>
           <button id="closePreviewModal" class="rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-300">Close</button>
         </div>
-        <div class="mt-5 grid gap-5 xl:grid-cols-[minmax(0,1.15fr)_360px]">
+        <div class="mt-5 flex flex-col gap-5">
           <div id="previewMediaFrame" class="min-w-0 flex min-h-[320px] items-center justify-center overflow-hidden rounded-3xl border border-white/10 bg-black/30 p-2">
             <video id="previewVideo" class="hidden max-h-[60vh] w-full bg-black object-contain" controls playsinline></video>
             <img id="previewThumbnail" class="max-h-[60vh] w-full object-contain" alt="" />
           </div>
-          <div class="min-w-0 space-y-4">
+          <div class="min-w-0 grid gap-4 lg:grid-cols-2">
             <div class="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
               <div class="flex items-center justify-between text-sm text-zinc-400">
                 <span>Detected duration</span>
@@ -116,7 +116,9 @@
               <span class="text-sm text-zinc-400">Quality</span>
               <select id="qualitySelect" class="w-full rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white"></select>
             </label>
-            <button id="confirmDownload" class="w-full rounded-2xl border border-white bg-white px-5 py-3 text-sm font-medium text-black transition hover:bg-zinc-200">Confirm Download</button>
+            <div class="lg:col-span-2">
+              <button id="confirmDownload" class="w-full rounded-2xl border border-white bg-white px-5 py-3 text-sm font-medium text-black transition hover:bg-zinc-200">Confirm Download</button>
+            </div>
           </div>
         </div>
       </div>
@@ -136,6 +138,6 @@
       </a>
     </template>
 
-    <script src="/app.js?v=20260313c" defer></script>
+    <script src="/app.js?v=20260313d" defer></script>
   </body>
 </html>