From 342c16aa02c49c241d48e91a0ec76a592c82b860 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Fri, 3 Jul 2026 15:54:00 +0800
Subject: [PATCH] style(mockups): keep tool-card titles on their own line

Cosmetic polish for the tools-page mockups. In the wide "All tools" tiles the
title shared a flex-wrap row with up to three badges (Suggested / status /
Source-backed), so long titles like "Clinical KB Search" wrapped around the
pills. Put the title on its own line with the badge cluster beneath it (matching
the compact ToolCard), and tighten the badge gap to gap-1.5 for a consistent
cluster. No behavior or structural change; responsive guard 7/7, no overflow.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../tools-page-mockups/tools-page-mockup-page.tsx      | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/tools-page-mockups/tools-page-mockup-page.tsx b/src/components/tools-page-mockups/tools-page-mockup-page.tsx
index 92d1fd53d..1d0ea068d 100644
--- a/src/components/tools-page-mockups/tools-page-mockup-page.tsx
+++ b/src/components/tools-page-mockups/tools-page-mockup-page.tsx
@@ -290,7 +290,7 @@ function ToolCard({ tool, suggested = false }: { tool: ToolFixture; suggested?:
         <div className="min-w-0 flex-1">
           <div className="grid gap-2">
             <h3 className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{tool.title}</h3>
-            <div className="flex flex-wrap items-center gap-2">
+            <div className="flex flex-wrap items-center gap-1.5">
               {suggested ? <SuggestedBadge /> : null}
               <StatusPill status={tool.status} />
               {tool.sourceBacked ? <SourceBackedBadge compact /> : null}
@@ -437,15 +437,13 @@ function WideToolTile({
       <div className="flex items-start gap-3">
         <ToolIcon tool={tool} quiet={!suggested} />
         <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-2">
-            <h3 className="min-w-0 flex-1 text-base font-extrabold leading-6 text-[color:var(--text-heading)]">
-              {tool.title}
-            </h3>
+          <h3 className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{tool.title}</h3>
+          <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
             {suggested ? <SuggestedBadge /> : null}
             <StatusPill status={tool.status} />
             {tool.sourceBacked ? <SourceBackedBadge compact /> : null}
           </div>
-          <p className="mt-1 line-clamp-2 text-sm font-medium leading-5 text-[color:var(--text-muted)]">
+          <p className="mt-2 line-clamp-2 text-sm font-medium leading-5 text-[color:var(--text-muted)]">
             {tool.description}
           </p>
         </div>