From 0c479860efb9758875dad49229ce09a78f0d6635 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 4 May 2026 20:03:52 +0200
Subject: [PATCH] style: finalize anime details sidebar and layout

---
 templates/anime.gohtml | 52 +++++++++++++++++++++++-------------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index 485722b..477a984 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -44,8 +44,8 @@
       {{template "watchlist_actions" dict "Anime" $anime "User" .User "Status" .Status}}
 
       <div class="mt-12 flex flex-col gap-12 lg:flex-row">
-        <div class="grow lg:max-w-3xl">
-          <section>
+        <div class="grow">
+          <section class="max-w-3xl">
             <h2 class="mb-4 text-lg font-normal text-neutral-300">Synopsis</h2>
             <p id="synopsis-container" class="text-neutral-400 text-base leading-relaxed line-clamp-6 md:line-clamp-none">{{if $anime.Synopsis}}{{$anime.Synopsis}}{{else}}No synopsis available.{{end}}</p>
             {{if and $anime.Synopsis (gt (len $anime.Synopsis) 400)}}
@@ -64,18 +64,10 @@
               </button>
             {{end}}
           </section>
-
-          {{if $anime.Genres}}
-            <div class="mt-10 flex flex-wrap gap-2">
-              {{range $anime.Genres}}
-                <span class="bg-neutral-900/50 px-3 py-1 text-xs font-normal text-neutral-400 ring-1 ring-white/5 transition-colors hover:text-neutral-300 hover:ring-white/10">{{.Name}}</span>
-              {{end}}
-            </div>
-          {{end}}
         </div>
 
         <aside class="flex shrink-0 flex-col lg:w-72">
-          <div class="bg-white/5 p-6 ring-1 ring-white/10">
+          <div class="bg-white/[0.02] p-6 ring-1 ring-white/5">
             <h3 class="mb-6 text-base font-normal text-neutral-300">Information</h3>
             <div class="flex flex-col gap-6 text-sm">
               {{if $anime.Studios}}
@@ -87,7 +79,17 @@
               {{if $anime.Producers}}
                 <div>
                   <dt class="mb-1 text-xs font-normal text-neutral-500">Producers</dt>
-                  <dd class="text-neutral-400 text-xs leading-relaxed">{{range $i, $p := $anime.Producers}}{{if $i}}, {{end}}{{$p.Name}}{{end}}</dd>
+                  <dd class="text-neutral-300 text-xs leading-relaxed">{{range $i, $p := $anime.Producers}}{{if $i}}, {{end}}{{$p.Name}}{{end}}</dd>
+                </div>
+              {{end}}
+              {{if $anime.Genres}}
+                <div>
+                  <dt class="mb-1 text-xs font-normal text-neutral-500">Genres</dt>
+                  <dd class="flex flex-wrap gap-1.5 pt-1">
+                    {{range $anime.Genres}}
+                      <span class="bg-white/5 px-2 py-0.5 text-[11px] font-normal text-neutral-400 ring-1 ring-white/5">{{.Name}}</span>
+                    {{end}}
+                  </dd>
                 </div>
               {{end}}
               {{if $anime.Duration}}
@@ -96,18 +98,20 @@
                   <dd class="text-neutral-300">{{$anime.Duration}}</dd>
                 </div>
               {{end}}
-              {{if $anime.Rank}}
-                <div>
-                  <dt class="mb-1 text-xs font-normal text-neutral-500">Rank</dt>
-                  <dd class="text-neutral-300">#{{$anime.Rank}}</dd>
-                </div>
-              {{end}}
-              {{if $anime.ScoredByFormatted}}
-                <div>
-                  <dt class="mb-1 text-xs font-normal text-neutral-500">Scored By</dt>
-                  <dd class="text-neutral-300">{{$anime.ScoredByFormatted}} users</dd>
-                </div>
-              {{end}}
+              <div class="grid grid-cols-2 gap-4">
+                {{if $anime.Rank}}
+                  <div>
+                    <dt class="mb-1 text-xs font-normal text-neutral-500">Rank</dt>
+                    <dd class="text-neutral-300">#{{$anime.Rank}}</dd>
+                  </div>
+                {{end}}
+                {{if $anime.ScoredByFormatted}}
+                  <div>
+                    <dt class="mb-1 text-xs font-normal text-neutral-500">Scored By</dt>
+                    <dd class="text-neutral-300">{{$anime.ScoredByFormatted}}</dd>
+                  </div>
+                {{end}}
+              </div>
             </div>
           </div>
         </aside>