From 2cf5bc20172b4c78ac222c00b92298b1f91d77a6 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sun, 24 May 2026 20:20:50 +0200
Subject: [PATCH] refactor: restructure episode controls for high episode
 counts

---
 templates/watch.gohtml | 44 +++++++++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/templates/watch.gohtml b/templates/watch.gohtml
index 987c45d..c67f6d1 100644
--- a/templates/watch.gohtml
+++ b/templates/watch.gohtml
@@ -179,31 +179,35 @@
         <div class="flex items-center justify-between">
           <span class="text-sm font-normal text-foreground-muted">Episodes</span>
           {{if gt $totalEpisodes 100}}
-            <input id="episode-search" type="text" name="episode-search" placeholder="Find" data-episode-search class="w-24 bg-background-surface text-sm px-3 py-1.5 text-foreground placeholder-foreground-muted focus:outline-none focus:ring-1 focus:ring-accent" />
+            <span class="sr-only">Episode controls</span>
           {{end}}
         </div>
 
         {{if gt $totalEpisodes 100}}
-          <ui-dropdown class="relative block" data-align="left" data-width="min-w-[200px]" data-episode-dropdown>
-            <div data-trigger>
-              <button class="w-full flex items-center justify-between px-3 py-2 bg-background-surface text-sm text-foreground-muted hover:bg-surface-hover">
-                <span data-dropdown-label>01-100</span>
-                <svg class="w-4 h-4 text-foreground-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
-              </button>
-            </div>
-            <div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-50 bg-background-button shadow-[var(--shadow-card)]">
-              <div class="flex flex-col py-1">
-                {{$ranges := ceilDiv $totalEpisodes 100}}
-                {{range $i := seq $ranges}}
-                  {{$start := imul $i 100}}
-                  {{$end := min (add $start 100) $totalEpisodes}}
-                  <button class="episode-range-btn px-4 py-2 text-left text-sm text-foreground-muted hover:bg-surface-hover" data-range-index="{{$i}}" data-range-start="{{add $start 1}}" data-range-end="{{$end}}">
-                    {{printf "%02d" (add $start 1)}}-{{printf "%02d" $end}}
-                  </button>
-                {{end}}
+          <div class="flex items-center gap-2">
+            <ui-dropdown class="relative block grow min-w-0" data-align="left" data-width="min-w-[200px]" data-episode-dropdown>
+              <div data-trigger>
+                <button class="w-full flex items-center justify-between px-3 py-2 bg-background-surface text-sm text-foreground-muted hover:bg-surface-hover">
+                  <span data-dropdown-label>01-100</span>
+                  <svg class="w-4 h-4 text-foreground-muted shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                </button>
               </div>
-            </div>
-          </ui-dropdown>
+              <div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-50 bg-background-button shadow-[var(--shadow-card)]">
+                <div class="flex flex-col py-1">
+                  {{$ranges := ceilDiv $totalEpisodes 100}}
+                  {{range $i := seq $ranges}}
+                    {{$start := imul $i 100}}
+                    {{$end := min (add $start 100) $totalEpisodes}}
+                    <button class="episode-range-btn px-4 py-2 text-left text-sm text-foreground-muted hover:bg-surface-hover" data-range-index="{{$i}}" data-range-start="{{add $start 1}}" data-range-end="{{$end}}">
+                      {{printf "%02d" (add $start 1)}}-{{printf "%02d" $end}}
+                    </button>
+                  {{end}}
+                </div>
+              </div>
+            </ui-dropdown>
+
+            <input id="episode-search" type="text" name="episode-search" placeholder="Find" data-episode-search class="w-24 bg-background-surface text-sm px-3 py-2 text-foreground placeholder-foreground-muted focus:outline-none focus:ring-1 focus:ring-accent" />
+          </div>
         {{end}}
       </div>