From a8a53d26771c6725957578068885872438b4c017 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Thu, 4 Jun 2026 16:37:06 +0200
Subject: [PATCH] fix: polish watch page layout and button consistency

---
 templates/watch.gohtml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/watch.gohtml b/templates/watch.gohtml
index a7d03b8..4a3dcbb 100644
--- a/templates/watch.gohtml
+++ b/templates/watch.gohtml
@@ -10,7 +10,7 @@
 {{$rangeStart := add (imul (idiv (sub $currentEpNum 1) 100) 100) 1}}
 {{$rangeEnd := min (add $rangeStart 99) $totalEpisodes}}
 
-<div id="watch-layout" class="flex flex-col gap-6 lg:flex-row lg:gap-6{{if le $totalEpisodes 100}} max-h-dvh{{end}}">
+<div id="watch-layout" class="flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-6{{if le $totalEpisodes 100}} max-h-dvh{{end}}">
   <div class="{{if le $totalEpisodes 100}}shrink-0 lg:flex-1 lg:self-start{{else}}flex-1{{end}} min-w-0">
     <div class="mb-4 flex items-center justify-between">
       <a href="/anime/{{$anime.MalID}}" class="inline-flex items-center gap-2 text-sm text-foreground-muted transition-colors hover:text-foreground">
@@ -19,7 +19,7 @@
       </a>
       <ui-dropdown class="relative block" data-align="right" data-width="min-w-[160px]">
         <div data-trigger class="cursor-pointer">
-          <button type="button" class="!rounded-none flex items-center justify-between gap-2 bg-background-button px-4 py-2 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+          <button type="button" class="!rounded-none inline-flex h-10 items-center justify-between gap-2 bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
             <span id="watchlist-status-display-{{$anime.MalID}}">
               {{if .WatchlistStatus}}{{if eq .WatchlistStatus "watching"}}Watching{{else if eq .WatchlistStatus "completed"}}Completed{{else if eq .WatchlistStatus "plan_to_watch"}}Plan to Watch{{else if eq .WatchlistStatus "dropped"}}Dropped{{end}}{{else}}Add to Watchlist{{end}}
             </span>
@@ -186,7 +186,7 @@
     </div>
   </div>
 
-    <div class="w-full lg:w-80 xl:w-96{{if le $totalEpisodes 100}} flex flex-col min-h-0 flex-1 lg:flex-none lg:shrink-0 lg:sticky lg:top-24 lg:self-start lg:h-[calc(100dvh-5rem)] lg:overflow-y-auto lg:pb-4{{else}} shrink-0{{end}}">
+    <div class="w-full lg:w-80 xl:w-96{{if le $totalEpisodes 100}} flex flex-col min-h-0 flex-1 lg:flex-none lg:shrink-0 lg:sticky lg:top-8 lg:self-start lg:h-[calc(100dvh-5rem)] lg:overflow-y-auto lg:pb-4{{else}} shrink-0{{end}}">
       {{if .Seasons}}
         {{$currentSeason := dict "Prefix" "" "Title" $anime.Title}}
         {{range .Seasons}}
@@ -194,7 +194,7 @@
         {{end}}
         <ui-dropdown class="relative block mb-4" data-align="left" data-width="w-full">
           <div data-trigger>
-            <button class="w-full flex items-center justify-between px-3 py-2 bg-background-button text-sm font-normal text-foreground-muted hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+            <button class="flex h-10 w-full items-center justify-between bg-background-button px-3 text-sm font-normal text-foreground-muted transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
               <span class="truncate">
                 {{if $currentSeason.Prefix}}<span class="font-normal text-foreground mr-1">{{$currentSeason.Prefix}}:</span>{{end}}
                 {{$currentSeason.Title}}
@@ -233,7 +233,7 @@
           <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-button text-sm font-normal text-foreground-muted hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+                <button class="flex h-10 w-full items-center justify-between bg-background-button px-3 text-sm font-normal text-foreground-muted hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
                   <span data-dropdown-label>{{printf "%02d" $rangeStart}}-{{printf "%02d" $rangeEnd}}</span>
                   <svg class="h-4 w-4 text-foreground-muted shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
                 </button>
@@ -252,7 +252,7 @@
               </div>
             </ui-dropdown>
 
-            <input id="episode-search" type="text" name="episode-search" placeholder="Find" data-episode-search class="w-24 bg-background-button text-sm px-3 py-2 text-foreground placeholder-foreground-muted outline-none focus:ring-1 focus:ring-accent" />
+            <input id="episode-search" type="text" name="episode-search" placeholder="Find" data-episode-search class="h-10 w-24 bg-background-button px-3 text-sm text-foreground placeholder-foreground-muted outline-none focus:ring-1 focus:ring-accent" />
           </div>
         {{end}}
       </div>