Fix animal list display

src/app/(normal)/artworks/animalstudies/index/page.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeftIcon } from "lucide-react";
+import { ArrowLeftIcon, ChevronRightIcon } from "lucide-react";
 import Link from "next/link";
 
 import {
@@ -82,16 +82,17 @@ export default async function AnimalListPage() {
     }
 
     return (
-      <ul className="space-y-1.5">
+      <ul className="space-y-1">
         {list.map((a) => (
           <li key={a.id}>
             <Link
               href={`/artworks/single/${a.id}?from=animal-index`}
               className="
-  inline-flex items-center gap-2
+  group flex w-full items-center gap-2
-  rounded-md px-2 py-1
+  rounded-md px-2 py-1.5
   text-sm font-medium
-  hover:bg-muted
+  hover:bg-muted/60
+  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
 "
             >
               <span
@@ -102,7 +103,7 @@ export default async function AnimalListPage() {
             group-hover:translate-x-0.5
           "
               >
-                →
+                <ChevronRightIcon className="h-4 w-4" />
               </span>
 
               <span className="leading-snug">{a.name}</span>
@@ -149,7 +150,7 @@ export default async function AnimalListPage() {
         </div>
       </header>
 
-      <div className="space-y-6">
+      <div className="space-y-6 sm:space-y-4">
         <Card>
           <CardHeader className="space-y-1">
             <CardTitle className="text-base">
@@ -177,15 +178,17 @@ export default async function AnimalListPage() {
                   const isStandalone = children.length === 0;
 
                   return (
-                    <AccordionItem key={p.id} value={p.id} className="border-b">
+                    <AccordionItem key={p.id} value={p.id} className="py-1 sm:py-1">
                       <AccordionTrigger
                         className="
-                          py-4
+                          py-4 sm:py-3
                           rounded-md px-2 -mx-2
+                          bg-hover text-hover-foreground dark:bg-hover dark:text-hover-foreground
                           transition-colors
-                          hover:bg-muted/60
+                          hover:bg-hover/80 dark:hover:bg-hover/80
+                          font-semibold
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-                          data-[state=open]:bg-muted/40
+                          data-[state=open]:bg-muted/90 dark:data-[state=open]:bg-muted/90
                         "
                       >
                         <div className="flex w-full items-center justify-between pr-2">
@@ -211,41 +214,44 @@ export default async function AnimalListPage() {
                         </div>
                       </AccordionTrigger>
 
-                      <AccordionContent className="pb-5">
+                      <AccordionContent className="pb-4 sm:pb-4">
                         {isStandalone ? (
-                          <div className="rounded-md border p-4">
+                          <div className="space-y-2">
-                            <div className="mb-3 flex items-center justify-between">
+                            <div className="flex items-center justify-between text-sm font-medium">
-                              <div className="text-sm font-medium">Artworks</div>
+                              <span>Artworks</span>
                               <Badge variant="outline">{p.artworks.length}</Badge>
                             </div>
-                            <ArtworkList items={p.artworks} />
+                            <div>
+                              <ArtworkList items={p.artworks} />
+                            </div>
                           </div>
                         ) : (
-                          <div className="space-y-4">
+                          <div className="space-y-4 sm:space-y-3">
                             {p.artworks.length > 0 ? (
                               <>
-                                <div className="rounded-md border p-4">
+                                <div className="space-y-2">
-                                  <div className="mb-3 flex items-center justify-between">
+                                  <div className="flex items-center justify-between text-sm font-medium">
-                                    <div className="text-sm font-medium">{/* Directly tagged */}</div>
+                                    <span>Direct artworks</span>
                                     <Badge variant="outline">{p.artworks.length}</Badge>
                                   </div>
-                                  <ArtworkList items={p.artworks} />
+                                  <div>
+                                    <ArtworkList items={p.artworks} />
+                                  </div>
                                 </div>
 
                                 <Separator />
                               </>
                             ) : null}
 
-                            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                            <div className="grid grid-cols-1 gap-4 sm:gap-2 sm:grid-cols-2">
                               {children.map((c) => (
-                                <div key={c.id} className="rounded-md border p-4">
+                                <div key={c.id} className="space-y-2 pt-3">
-                                  <div className="mb-3 flex items-center justify-between">
+                                  <div className="flex items-center justify-between text-sm font-medium">
                                     <div className="min-w-0">
-                                      <div className="truncate text-sm font-medium">{c.name}</div>
+                                      <div className="truncate">{c.name}</div>
                                     </div>
                                     <Badge variant="outline">{c.artworks.length}</Badge>
                                   </div>
-
                                   <ArtworkList items={c.artworks} />
                                 </div>
                               ))}
@@ -269,12 +275,12 @@ export default async function AnimalListPage() {
                 Tags whose parent is not visible (or not configured for the animal page).
               </p> */}
             </CardHeader>
-            <CardContent className="space-y-3">
+            <CardContent className="space-y-4 sm:space-y-2">
-              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <div className="grid grid-cols-1 gap-4 sm:gap-2 sm:grid-cols-2">
                 {orphans.map((t) => (
-                  <div key={t.id} className="rounded-md border p-4">
+                  <div key={t.id} className="space-y-2 pt-3">
-                    <div className="mb-3 flex items-center justify-between">
+                    <div className="flex items-center justify-between text-sm font-medium">
-                      <div className="truncate text-sm font-medium">{t.name}</div>
+                      <div className="truncate">{t.name}</div>
                       <Badge variant="outline">{t.artworks.length}</Badge>
                     </div>
                     <ArtworkList items={t.artworks} />

src/app/globals.css

@@ -105,6 +105,8 @@
   --border: oklch(0.3289 0.0092 268.3843);
   --input: oklch(0.3289 0.0092 268.3843);
   --ring: oklch(0.6132 0.2294 291.7437);
+  --hover: oklch(0.34 0.02 270);
+  --hover-foreground: var(--foreground);
   --chart-1: oklch(0.8003 0.1821 151.7110);
   --chart-2: oklch(0.6132 0.2294 291.7437);
   --chart-3: oklch(0.8077 0.1035 19.5706);