From f9c1fc939158fa373aa18db72ed4ccafecddbebe Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 25 May 2026 01:41:31 +0200
Subject: [PATCH] fix: standardize empty state and grid styles

---
 templates/browse.gohtml | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/templates/browse.gohtml b/templates/browse.gohtml
index edf83aa..b35ebfa 100644
--- a/templates/browse.gohtml
+++ b/templates/browse.gohtml
@@ -7,23 +7,23 @@
 {{define "browse_content"}}
 <div id="browse-content" class="flex flex-col gap-6">
   <div class="flex items-end justify-between">
-    <h1 class="font-[family:var(--font-serif)] tracking-[-0.03em] leading-[1.15] text-xl font-normal text-foreground">Browse</h1>
+    <h1 class="text-xl font-normal tracking-[-0.02em] text-foreground">Browse</h1>
   </div>
-
   {{template "filter_bar" .}}
 
   <main class="w-full">
     {{if eq (len .Animes) 0}}
-      <div class="flex h-64 flex-col items-center justify-center gap-4 text-foreground-muted">
-        <svg class="h-12 w-12 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
-        <p class="text-foreground">No anime found</p>
-        <div class="flex gap-2">
-          <a href="/browse" class="px-4 py-2 text-sm bg-background-surface hover:bg-background-button-hover text-foreground transition-colors">Clear filters</a>
-          <a href="/browse?order_by=popularity&sort=desc" class="px-4 py-2 text-sm bg-accent/20 hover:bg-accent/30 text-accent transition-colors">Browse popular</a>
+      <div class="flex h-64 flex-col items-center justify-center gap-3 text-foreground-muted">
+        <svg class="h-10 w-10 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" /></svg>
+        <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>
         </div>
       </div>
     {{else}}
-      <div id="anime-grid" class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
+      <div id="anime-grid" class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7">
         {{range .Animes}}
           {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
         {{end}}