Improve source-specific search queries and preview 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-3xl rounded-3xl border border-white/10 bg-zinc-950 p-5 shadow-2xl">
+      <div class="w-full max-w-4xl 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 md:grid-cols-[1.2fr_0.8fr]">
-          <div id="previewMediaFrame" class="flex min-h-[320px] items-center justify-center overflow-hidden rounded-3xl border border-white/10 bg-black/30 p-2">
+        <div class="mt-5 grid gap-5 xl:grid-cols-[minmax(0,1.15fr)_360px]">
+          <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="space-y-4">
+          <div class="min-w-0 space-y-4">
             <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>
@@ -136,6 +136,6 @@
       </a>
     </template>
 
-    <script src="/app.js?v=20260313b" defer></script>
+    <script src="/app.js?v=20260313c" defer></script>
   </body>
 </html>