From 20942d47c65bea7a5e34a2531d8916b9b9d5b522 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Wed, 24 Jun 2026 09:46:43 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20card=20layout=20=E2=80=94=20absolute=20t?=
 =?UTF-8?q?ype=20badge,=20truncated=20title=20with=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the type badge (colored dot + label) to absolute top-left overlay
on the card. Title now truncates to a single line with a native tooltip
on hover showing the full name. Vote controls remain fixed to the right
via CardAction.
---
 apps/docs/src/components/store/StoreApp.tsx | 22 +++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/docs/src/components/store/StoreApp.tsx b/apps/docs/src/components/store/StoreApp.tsx
index bde61fdc2..9a0037e07 100644
--- a/apps/docs/src/components/store/StoreApp.tsx
+++ b/apps/docs/src/components/store/StoreApp.tsx
@@ -285,21 +285,23 @@ const SubmissionCard = ({
   };
 
   return (
-    <Card className="transition-transform duration-150 hover:scale-[1.02]">
+    <Card className="relative transition-transform duration-150 hover:scale-[1.02]">
+      <Badge
+        variant="secondary"
+        className="absolute left-2 top-2 z-10 gap-1.5 bg-background/80 px-2 backdrop-blur-sm"
+      >
+        <span className={cn("size-2 rounded-full", typeDotColors[submission.type])} />
+        {typeLabels[submission.type]}
+      </Badge>
+
       <a href={`/workshop/${submission.id}/`} className="block">
         {screenshotUrls.length > 0 && <ScreenshotGallery urls={screenshotUrls} title={submission.title} />}
       </a>
 
       <CardHeader>
-        <div className="flex items-center gap-2">
-          <a href={`/workshop/${submission.id}/`} className="min-w-0 truncate hover:underline">
-            <CardTitle className="truncate">{submission.title}</CardTitle>
-          </a>
-          <Badge variant="secondary" className="shrink-0 gap-1.5 px-2">
-            <span className={cn("size-2 rounded-full", typeDotColors[submission.type])} />
-            {typeLabels[submission.type]}
-          </Badge>
-        </div>
+        <a href={`/workshop/${submission.id}/`} className="min-w-0 hover:underline" title={submission.title}>
+          <CardTitle className="truncate">{submission.title}</CardTitle>
+        </a>
         <CardDescription className="text-xs">
           {submission.authorName} · v{submission.version} · {relativeTime(submission.created)}
         </CardDescription>