From 49512a6708fb9188e89fb4cb1aafb4ab602ad2e6 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Tue, 9 Jun 2026 18:21:27 +0200
Subject: [PATCH] refactor: replace scrollbar hacks with scrollbar-hidden class

---
 templates/browse.gohtml                       |  4 ++--
 templates/components/continue_watching.gohtml |  2 +-
 templates/components/filter_bar.gohtml        | 18 +++++++++---------
 templates/discover.gohtml                     |  4 ++--
 templates/index.gohtml                        |  4 ++--
 templates/watchlist.gohtml                    |  4 ++--
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/templates/browse.gohtml b/templates/browse.gohtml
index 2ca9d5f..ec90b69 100644
--- a/templates/browse.gohtml
+++ b/templates/browse.gohtml
@@ -19,8 +19,8 @@
         <p class="text-sm text-foreground">No anime found</p>
         <p class="text-sm">Try clearing filters or browsing what’s popular.</p>
         <div class="mt-2 flex gap-2">
-          <a href="/browse" class="rounded-none! inline-flex h-10 items-center justify-center 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">Clear filters</a>
-          <a href="/browse?order_by=popularity&sort=desc" class="rounded-none! inline-flex h-10 items-center justify-center 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">Browse popular</a>
+          <a href="/browse" class=" inline-flex h-10 items-center justify-center 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">Clear filters</a>
+          <a href="/browse?order_by=popularity&sort=desc" class=" inline-flex h-10 items-center justify-center 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">Browse popular</a>
         </div>
       </div>
     {{else}}
diff --git a/templates/components/continue_watching.gohtml b/templates/components/continue_watching.gohtml
index cee423d..38b52c2 100644
--- a/templates/components/continue_watching.gohtml
+++ b/templates/components/continue_watching.gohtml
@@ -3,7 +3,7 @@
   <h2 class="mb-3 text-base font-normal text-foreground">Continue Watching</h2>
 
   <div class="relative overflow-hidden">
-  <div id="continue-watching-items" data-continue-watching-track class="flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth pb-4 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden">
+  <div id="continue-watching-items" data-continue-watching-track class="flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth pb-4 scrollbar-hidden">
     {{range .}}
       {{$title := .TitleOriginal}}
       {{if .TitleEnglish.Valid}}{{$title = .TitleEnglish.String}}{{end}}
diff --git a/templates/components/filter_bar.gohtml b/templates/components/filter_bar.gohtml
index 8e1a014..0afa8a7 100644
--- a/templates/components/filter_bar.gohtml
+++ b/templates/components/filter_bar.gohtml
@@ -33,7 +33,7 @@
           type="text"
           value="{{.Query}}"
           placeholder="Search anime..."
-          class="rounded-none! w-full bg-background-button px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none transition-colors hover:bg-background-button-hover focus:ring-1 focus:ring-accent"
+          class=" w-full bg-background-button px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none transition-colors hover:bg-background-button-hover focus:ring-1 focus:ring-accent"
         />
       </div>
       <input id="studio-input" type="hidden" name="studio" value="{{if .Studio}}{{.Studio}}{{end}}">
@@ -48,14 +48,14 @@
 
   <ui-dropdown id="studio-dropdown" class="relative block" data-align="left" data-width="w-72" hx-push-url="false">
     <div data-trigger class="cursor-pointer">
-      <button class="rounded-none! flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+      <button class=" flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
         {{if .Studio}}{{if .StudioName}}{{.StudioName}}{{else}}Studio #{{.Studio}}{{end}}{{else}}Any Studio{{end}}
         <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
       </button>
     </div>
     <div data-content class="hidden absolute z-50 w-72 overflow-hidden bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2">
       <div class="p-2">
-        <input id="studio-search" type="text" placeholder="Search studios..." class="rounded-none! w-full bg-background-sidebar px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none focus:ring-1 focus:ring-accent"
+        <input id="studio-search" type="text" placeholder="Search studios..." class=" w-full bg-background-sidebar px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none focus:ring-1 focus:ring-accent"
           hx-get="/api/jikan/producers"
           hx-vals='{"page":1,"limit":12}'
           hx-trigger="input changed delay:250ms, search"
@@ -67,12 +67,12 @@
           name="q"
         />
       </div>
-      <div class="flex max-h-72 flex-col overflow-y-auto py-1 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden" id="studio-results" hx-get="/api/jikan/producers?page=1&limit=12" hx-trigger="load" hx-target="this" hx-swap="innerHTML" hx-push-url="false" hx-headers='{"Accept":"text/html"}'>
+      <div class="flex max-h-72 flex-col overflow-y-auto py-1 scrollbar-hidden" id="studio-results" hx-get="/api/jikan/producers?page=1&limit=12" hx-trigger="load" hx-target="this" hx-swap="innerHTML" hx-push-url="false" hx-headers='{"Accept":"text/html"}'>
       </div>
     </div>
   </ui-dropdown>
 
-  <form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content main" hx-select="#browse-content main" hx-swap="outerHTML" class="rounded-none! flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground">
+  <form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content main" hx-select="#browse-content main" hx-swap="outerHTML" class=" flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground">
     <input type="hidden" name="q" value="{{.Query}}">
     {{if .Studio}}<input type="hidden" name="studio" value="{{.Studio}}">{{end}}
     {{if .Type}}<input type="hidden" name="type" value="{{.Type}}">{{end}}
@@ -92,12 +92,12 @@
 
   <ui-dropdown class="relative block" data-align="left" data-width="w-48">
     <div data-trigger class="cursor-pointer">
-      <button class="rounded-none! flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+      <button class=" flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
         {{if $selectedCount}}Genres ({{$selectedCount}}){{else}}Genres{{end}}
         <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
       </button>
     </div>
-    <div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden">
+    <div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button shadow-(--shadow-card) left-0 top-full mt-2 scrollbar-hidden">
       <form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content main" hx-select="#browse-content main" hx-swap="outerHTML" class="flex flex-col py-1">
         <input type="hidden" name="q" value="{{.Query}}">
         {{if .Studio}}<input type="hidden" name="studio" value="{{.Studio}}">{{end}}
@@ -156,7 +156,7 @@
   <div class="flex items-center gap-1">
     <ui-dropdown class="relative block" data-align="left" data-width="w-48">
       <div data-trigger class="cursor-pointer">
-        <button class="rounded-none! flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+        <button class=" flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
           Sort: {{if eq .OrderBy "popularity"}}Popularity{{else if eq .OrderBy "score"}}Score{{else if eq .OrderBy "title"}}Title{{else if eq .OrderBy "start_date"}}Start Date{{else if eq .OrderBy "episodes"}}Episodes{{else}}Default{{end}}
           <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
         </button>
@@ -170,7 +170,7 @@
       </div>
     </ui-dropdown>
 
-    <a href='{{browseURL . (dict "sort" (nextSort .Sort))}}' class="rounded-none! flex h-9 w-9 items-center justify-center bg-background-button text-foreground-muted hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+    <a href='{{browseURL . (dict "sort" (nextSort .Sort))}}' class=" flex h-9 w-9 items-center justify-center bg-background-button text-foreground-muted hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
       {{if eq .Sort "asc"}}
         <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
       {{else}}
diff --git a/templates/discover.gohtml b/templates/discover.gohtml
index 1544b13..a7bc091 100644
--- a/templates/discover.gohtml
+++ b/templates/discover.gohtml
@@ -16,8 +16,8 @@
       <p class="text-sm text-foreground">No top picks yet</p>
       <p class="text-sm">Add a few anime to your watchlist so the recommender has something to learn from.</p>
       <div class="mt-2 flex gap-2">
-        <a href="/watchlist" class="rounded-none! inline-flex h-10 items-center justify-center 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">Open watchlist</a>
-        <a href="/discover" class="rounded-none! inline-flex h-10 items-center justify-center 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">Discover anime</a>
+        <a href="/watchlist" class=" inline-flex h-10 items-center justify-center 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">Open watchlist</a>
+        <a href="/discover" class=" inline-flex h-10 items-center justify-center 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">Discover anime</a>
       </div>
     </div>
   {{else}}
diff --git a/templates/index.gohtml b/templates/index.gohtml
index a2302b8..f9940f2 100644
--- a/templates/index.gohtml
+++ b/templates/index.gohtml
@@ -51,7 +51,7 @@
         </a>
       </div>
       <div class="relative overflow-hidden">
-        <div data-top-pick-track tabindex="0" class="grid min-w-0 grid-flow-col auto-cols-[calc((100%-0.75rem)/2.18)] gap-3 overflow-x-auto scroll-smooth pb-1 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden md:auto-cols-[calc((100%-2rem)/3.35)] md:gap-4 lg:auto-cols-[calc((100%-3rem)/4.35)] xl:auto-cols-[calc((100%-4rem)/5.35)] 2xl:auto-cols-[calc((100%-5rem)/6.35)]">
+        <div data-top-pick-track tabindex="0" class="grid min-w-0 grid-flow-col auto-cols-[calc((100%-0.75rem)/2.18)] gap-3 overflow-x-auto scroll-smooth pb-1 scrollbar-hidden md:auto-cols-[calc((100%-2rem)/3.35)] md:gap-4 lg:auto-cols-[calc((100%-3rem)/4.35)] xl:auto-cols-[calc((100%-4rem)/5.35)] 2xl:auto-cols-[calc((100%-5rem)/6.35)]">
           {{range .Animes}}
             <div data-top-pick-item>
               {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
@@ -120,7 +120,7 @@
 <section id="continue-watching-section" class="w-full" data-continue-watching-carousel>
   <h2 class="mb-3 text-base font-normal text-foreground">Continue Watching</h2>
   <div class="relative overflow-hidden">
-  <div data-continue-watching-track class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden">
+  <div data-continue-watching-track class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 scrollbar-hidden">
     {{range (seq 3)}}
       <div data-continue-watching-item class="flex w-70 shrink-0 snap-start flex-col gap-2 2xl:w-lg">
         <div class="skeleton aspect-video w-full overflow-hidden"></div>
diff --git a/templates/watchlist.gohtml b/templates/watchlist.gohtml
index 670509c..57a892c 100644
--- a/templates/watchlist.gohtml
+++ b/templates/watchlist.gohtml
@@ -81,8 +81,8 @@
         <p class="text-sm text-foreground">Your watchlist is empty.</p>
         <p class="text-sm text-foreground-muted">Start adding anime to keep track of what you want to watch.</p>
         <div class="mt-2 flex gap-3">
-          <a href="/" class="rounded-none! inline-flex h-10 items-center justify-center 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">Browse anime</a>
-          <a href="/discover" class="rounded-none! inline-flex h-10 items-center justify-center 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">Discover new</a>
+          <a href="/" class=" inline-flex h-10 items-center justify-center 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">Browse anime</a>
+          <a href="/discover" class=" inline-flex h-10 items-center justify-center 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">Discover new</a>
         </div>
       </div>
     {{end}}