From 440e9e94bdb5d7652635e7169e400de51abed895 Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Fri, 3 Jul 2026 20:43:56 +0530
Subject: [PATCH] Constrain MCP picker card width

---
 apps/mcp/src/widget/components/WorkspaceCard.tsx |  8 ++++----
 apps/mcp/src/widget/views/Picker.tsx             | 10 +++++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/mcp/src/widget/components/WorkspaceCard.tsx b/apps/mcp/src/widget/components/WorkspaceCard.tsx
index 490add1a..597cf734 100644
--- a/apps/mcp/src/widget/components/WorkspaceCard.tsx
+++ b/apps/mcp/src/widget/components/WorkspaceCard.tsx
@@ -20,20 +20,20 @@ export function WorkspaceCard({
 	return (
 		<Card
 			as="button"
-			className="min-h-[104px] w-full p-3"
+			className="min-h-[92px] w-full p-2.5"
 			onClick={() => onClick(containerTag.containerTag)}
 			variant={active ? "active" : "interactive"}
 		>
-			<div className="absolute right-3 top-3 text-[11px] font-medium leading-none">
+			<div className="absolute right-2.5 top-2.5 text-[11px] font-medium leading-none">
 				{access ? <PermissionBadge permission={access.permission} /> : null}
 			</div>
 			{active ? (
-				<Check className="absolute bottom-3 right-3 size-3 shrink-0 text-accent" />
+				<Check className="absolute bottom-2.5 right-2.5 size-3 shrink-0 text-accent" />
 			) : null}
 			<Stack className="h-full" gap="xs">
 				<Stack align="center" direction="row" gap="sm" justify="between">
 					<span
-						className="min-w-0 max-w-[calc(100%-88px)] truncate text-sm font-medium text-white"
+						className="min-w-0 max-w-[calc(100%-82px)] truncate text-sm font-medium text-white"
 						style={{ fontFamily: "var(--font-brand)" }}
 					>
 						{name}
diff --git a/apps/mcp/src/widget/views/Picker.tsx b/apps/mcp/src/widget/views/Picker.tsx
index ba9d11da..8bb41aa2 100644
--- a/apps/mcp/src/widget/views/Picker.tsx
+++ b/apps/mcp/src/widget/views/Picker.tsx
@@ -66,8 +66,12 @@ export function Picker({
 
 	return (
 		<div className="flex flex-col">
-			<PageHeader description={description} title="Select Workspace" />
-			<div className="flex flex-col gap-(--space-4) px-(--page-header-px) pb-(--space-6)">
+			<PageHeader
+				description={description}
+				className="w-full max-w-[380px]"
+				title="Select Workspace"
+			/>
+			<div className="flex w-full max-w-[380px] flex-col gap-(--space-3) px-(--page-header-px) pb-(--space-6)">
 				{count >= SEARCH_THRESHOLD ? (
 					<div className="relative max-w-sm">
 						<Search className="pointer-events-none absolute left-(--space-3) top-1/2 size-4 -translate-y-1/2 text-text-muted" />
@@ -87,7 +91,7 @@ export function Picker({
 							No workspaces match “{query}”.
 						</p>
 					) : (
-						<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-(--space-2)">
+						<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-1.5">
 							{filtered.map((tag) => {
 								const access = assignedTags?.find(
 									(t) => t.containerTag === tag.containerTag,