From 14c4819e61acedf3d7c114cfba1cedcc54e06d15 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Mon, 6 Jul 2026 16:37:02 +0800
Subject: [PATCH] fix(teams): goto links flow three-up in a wrapping grid

Full-width rows read stretched in the 4xl detail container; auto-fit
minmax(10rem,1fr) grid keeps three equal cells per row and wraps cleanly
when the container narrows. Light border anchors each cell as a card.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../teams/components/team-detail-page.tsx     | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/views/teams/components/team-detail-page.tsx b/packages/views/teams/components/team-detail-page.tsx
index e17b79c232..70a4683245 100644
--- a/packages/views/teams/components/team-detail-page.tsx
+++ b/packages/views/teams/components/team-detail-page.tsx
@@ -396,17 +396,21 @@ function GotoSection({ team }: { team: Team }) {
       <h3 className="mb-1 text-xs font-medium text-muted-foreground">
         {t(($) => $.settings.goto)}
       </h3>
-      {links.map((link) => (
-        <AppLink
-          key={link.href}
-          href={link.href}
-          className="-mx-1.5 flex items-center gap-2 rounded-md px-1.5 py-1 text-sm transition-colors hover:bg-accent/60"
-        >
-          <link.icon className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <span className="min-w-0 flex-1 truncate">{link.label}</span>
-          <span className="text-xs tabular-nums text-muted-foreground">{link.value}</span>
-        </AppLink>
-      ))}
+      {/* Equal-width cells, three across in the detail container; auto-fit
+          wraps them cleanly when the container narrows. */}
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-2">
+        {links.map((link) => (
+          <AppLink
+            key={link.href}
+            href={link.href}
+            className="flex items-center gap-2 rounded-md border border-input/60 px-3 py-2 text-sm transition-colors hover:bg-accent/60"
+          >
+            <link.icon className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <span className="min-w-0 flex-1 truncate">{link.label}</span>
+            <span className="text-xs tabular-nums text-muted-foreground">{link.value}</span>
+          </AppLink>
+        ))}
+      </div>
     </div>
   );
 }