Many improvemtns and fixes related to decoupling of svelte and rust on android.

src/lib/components/library/VideoDownloadButton.svelte

@@ -38,6 +38,8 @@
 
   let isProcessing = $state(false);
   let showQualityPicker = $state(false);
+  let buttonEl: HTMLButtonElement;
+  let dropdownPos = $state({ top: 0, left: 0 });
 
   // Find download for this item
   const downloadInfo = $derived(
@@ -135,13 +137,26 @@
       }
     } else if (status === "failed") {
       // Show quality picker to retry
-      showQualityPicker = true;
+      openQualityPicker();
     } else {
       // Show quality picker
-      showQualityPicker = true;
+      openQualityPicker();
     }
   }
 
+  function openQualityPicker() {
+    if (buttonEl) {
+      const rect = buttonEl.getBoundingClientRect();
+      const dropdownWidth = 160; // w-40
+      const padding = 8;
+      let left = rect.right - dropdownWidth;
+      // Clamp to viewport bounds
+      left = Math.max(padding, Math.min(left, window.innerWidth - dropdownWidth - padding));
+      dropdownPos = { top: rect.bottom + 4, left };
+    }
+    showQualityPicker = true;
+  }
+
   function getTitle(): string {
     switch (status) {
       case "completed":
@@ -176,6 +191,7 @@
 
 <div class="relative">
   <button
+    bind:this={buttonEl}
     onclick={handleClick}
     disabled={isProcessing}
     class="p-2 rounded-full transition-all {getColor()} {isProcessing
@@ -242,41 +258,40 @@
       {/if}
     </div>
   </button>
-
-  <!-- Quality picker dropdown -->
-  {#if showQualityPicker}
-    <div class="absolute z-50 mt-1 right-0 w-40 bg-[var(--color-surface)] rounded-lg shadow-xl border border-gray-700 overflow-hidden">
-      <div class="p-2 text-xs text-gray-400 border-b border-gray-700">
-        Select Quality
-      </div>
-      {#each Object.entries(QUALITY_PRESETS) as [key, preset]}
-        <button
-          onclick={() => startDownload(key as QualityPreset)}
-          class="w-full px-3 py-2 text-left text-sm hover:bg-gray-700 transition-colors flex justify-between items-center"
-        >
-          <span>{preset.label}</span>
-          {#if preset.videoBitrate}
-            <span class="text-xs text-gray-500">{Math.round(preset.videoBitrate / 1_000_000)}Mbps</span>
-          {:else}
-            <span class="text-xs text-gray-500">Direct</span>
-          {/if}
-        </button>
-      {/each}
-      <button
-        onclick={() => showQualityPicker = false}
-        class="w-full px-3 py-2 text-left text-sm text-gray-400 hover:bg-gray-700 border-t border-gray-700"
-      >
-        Cancel
-      </button>
-    </div>
-  {/if}
 </div>
 
-<!-- Click outside to close -->
+<!-- Quality picker dropdown (fixed position, viewport-clamped) -->
 {#if showQualityPicker}
   <button
     class="fixed inset-0 z-40"
     onclick={() => showQualityPicker = false}
     aria-label="Close quality picker"
   ></button>
+  <div
+    class="fixed z-50 w-40 bg-[var(--color-surface)] rounded-lg shadow-xl border border-gray-700 overflow-hidden"
+    style="top: {dropdownPos.top}px; left: {dropdownPos.left}px;"
+  >
+    <div class="p-2 text-xs text-gray-400 border-b border-gray-700">
+      Select Quality
+    </div>
+    {#each Object.entries(QUALITY_PRESETS) as [key, preset]}
+      <button
+        onclick={() => startDownload(key as QualityPreset)}
+        class="w-full px-3 py-2 text-left text-sm hover:bg-gray-700 transition-colors flex justify-between items-center"
+      >
+        <span>{preset.label}</span>
+        {#if preset.videoBitrate}
+          <span class="text-xs text-gray-500">{Math.round(preset.videoBitrate / 1_000_000)}Mbps</span>
+        {:else}
+          <span class="text-xs text-gray-500">Direct</span>
+        {/if}
+      </button>
+    {/each}
+    <button
+      onclick={() => showQualityPicker = false}
+      class="w-full px-3 py-2 text-left text-sm text-gray-400 hover:bg-gray-700 border-t border-gray-700"
+    >
+      Cancel
+    </button>
+  </div>
 {/if}