Merge pull request #81 from assistant-ui/codex/fix-gallery-tooltip-layout

Fix gallery tooltip layout and make tooltip fully clickable

Author: petekp

app/docs/_components/gallery-docs-link.tsx

@@ -3,29 +3,48 @@
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 import { analytics } from "@/lib/analytics";
+import { cn } from "@/lib/ui/cn";
 
 interface GalleryDocsLinkProps {
   componentId: string;
-  componentName: string;
+  label: string;
   href: string;
   className?: string;
 }
 
 export function GalleryDocsLink({
   componentId,
-  componentName,
+  label,
   href,
   className,
 }: GalleryDocsLinkProps) {
   const handleClick = () => {
     analytics.gallery.componentClicked(componentId);
-    analytics.docs.navigationClicked(componentName, href);
+    analytics.docs.navigationClicked(label, href);
   };
 
   return (
-    <Link href={href} className={className} onClick={handleClick}>
-      <span>View Docs</span>
-      <ArrowRight className="size-3" aria-hidden="true" />
+    <Link
+      href={href}
+      className={cn(
+        "group inline-flex items-center gap-1 whitespace-nowrap hover:no-underline focus-visible:no-underline",
+        className,
+      )}
+      onClick={handleClick}
+    >
+      <span className="whitespace-nowrap text-sm font-semibold">{label}</span>
+      <span
+        className="text-neutral-400 dark:text-neutral-500"
+        aria-hidden="true"
+      >
+        •
+      </span>
+      <span className="inline-flex items-center gap-1 whitespace-nowrap text-xs">
+        <span className="underline-offset-2 group-hover:underline group-focus-visible:underline">
+          View Docs
+        </span>
+        <ArrowRight className="size-3" aria-hidden="true" />
+      </span>
     </Link>
   );
 }

app/docs/gallery/page.tsx

@@ -118,15 +118,13 @@ function GalleryPreviewCard({
   const componentMeta = galleryComponentDocs[componentId];
 
   return (
-    <div className={cn("group/gallery-card relative pt-8", className)}>
-      <div className="pointer-events-none absolute top-0 left-1/2 z-20 -translate-x-1/2 -translate-y-1 rounded-full border border-neutral-700/70 bg-neutral-900/90 px-3 py-1 text-[11px] font-medium tracking-wide text-neutral-100 opacity-0 shadow-sm backdrop-blur-sm transition-all duration-200 group-focus-within/gallery-card:translate-y-0 group-focus-within/gallery-card:opacity-100 group-hover/gallery-card:translate-y-0 group-hover/gallery-card:opacity-100 dark:border-neutral-300/80 dark:bg-neutral-100/90 dark:text-neutral-900">
-        <span className="text-sm font-semibold">{componentMeta.name}</span>
-        <span className="mx-1 text-neutral-400 dark:text-neutral-500">•</span>
+    <div className={cn("group/gallery-card relative pt-[44px]", className)}>
+      <div className="pointer-events-none absolute top-0 left-1/2 z-20 w-fit -translate-x-1/2 -translate-y-1 whitespace-nowrap rounded-xl border border-neutral-700/70 bg-neutral-900/90 px-3 py-2 text-[11px] font-medium tracking-wide text-neutral-100 opacity-0 shadow-sm backdrop-blur-sm transition-all duration-200 group-focus-within/gallery-card:translate-y-0 group-focus-within/gallery-card:opacity-100 group-hover/gallery-card:translate-y-0 group-hover/gallery-card:opacity-100 dark:border-neutral-300/80 dark:bg-neutral-100/90 dark:text-neutral-900">
         <GalleryDocsLink
           componentId={componentId}
-          componentName={componentMeta.name}
+          label={componentMeta.name}
           href={componentMeta.docsHref}
-          className="pointer-events-auto inline-flex items-center gap-1 text-xs text-neutral-200/90 underline-offset-2 hover:text-white hover:underline focus-visible:underline focus-visible:outline-none dark:text-neutral-700 dark:hover:text-neutral-950"
+          className="pointer-events-auto inline-flex items-center gap-1 whitespace-nowrap text-neutral-200/90 hover:text-white focus-visible:outline-none dark:text-neutral-700 dark:hover:text-neutral-950"
         />
       </div>
       {children}

lib/tests/tool-ui/docs/gallery-tooltip-layout-contract.test.ts

@@ -0,0 +1,31 @@
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, test } from "vitest";
+
+describe("gallery tooltip layout contract", () => {
+  test("gallery cards keep a single-row clickable tooltip with extended spacing buffer", () => {
+    const galleryPagePath = path.join(process.cwd(), "app/docs/gallery/page.tsx");
+    const content = fs.readFileSync(galleryPagePath, "utf8");
+
+    expect(content).toContain("group/gallery-card relative pt-[44px]");
+    expect(content).toContain("label={componentMeta.name}");
+    expect(content).toContain("pointer-events-auto inline-flex items-center");
+  });
+
+  test("gallery docs link includes a bullet and keeps name unwrapped", () => {
+    const docsLinkPath = path.join(
+      process.cwd(),
+      "app/docs/_components/gallery-docs-link.tsx",
+    );
+    const content = fs.readFileSync(docsLinkPath, "utf8");
+
+    expect(content).toMatch(/label:\s*string/);
+    expect(content).toContain("whitespace-nowrap");
+    expect(content).toContain("•");
+    expect(content).toContain("group-hover:underline");
+    expect(content).toContain("group-focus-visible:underline");
+    expect(content).toContain("hover:no-underline");
+    expect(content).toContain("{label}");
+    expect(content).toContain("View Docs");
+  });
+});