From 225c86099bb9e4ed9df9196908df8381f601a256 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 17 Jun 2026 21:26:15 +0000
Subject: [PATCH] fix(web): prevent Apple Shortcuts card buttons from
 overflowing

The Apple Shortcuts integration card rendered two pill buttons with long
"Add memory shortcut" / "Search memory shortcut" labels in a non-shrinking
row, causing the second button to clip past the card's right edge.

Shorten the labels to "Add" / "Search" (the card title and icons already
convey context) and give each button a balanced min-width so both fit
within the card.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D2VjAHsTeZ32Y2DfbmnUbF
---
 .../web/components/integrations/shortcuts-detail.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/integrations/shortcuts-detail.tsx b/apps/web/components/integrations/shortcuts-detail.tsx
index 833488eb..3dd1b37a 100644
--- a/apps/web/components/integrations/shortcuts-detail.tsx
+++ b/apps/web/components/integrations/shortcuts-detail.tsx
@@ -153,7 +153,7 @@ export function ShortcutsConnectButtons({
 	return (
 		<div className="flex flex-col gap-2 sm:flex-row">
 			<PillButton
-				className="h-9 flex-none"
+				className="h-9 flex-none min-w-[88px]"
 				onClick={(e) => {
 					e.stopPropagation()
 					connect("add")
@@ -163,14 +163,14 @@ export function ShortcutsConnectButtons({
 				{pendingType === "add" ? (
 					<Loader className="size-4 text-[#FAFAFA] animate-spin" />
 				) : (
-					<Plus className="size-4 text-[#FAFAFA]" />
+					<Plus className="size-4 shrink-0 text-[#FAFAFA]" />
 				)}
 				<span className="text-[13px] text-[#FAFAFA] font-medium whitespace-nowrap">
-					{pendingType === "add" ? "Creating..." : "Add memory shortcut"}
+					{pendingType === "add" ? "Creating..." : "Add"}
 				</span>
 			</PillButton>
 			<PillButton
-				className="h-9 flex-none"
+				className="h-9 flex-none min-w-[88px]"
 				onClick={(e) => {
 					e.stopPropagation()
 					connect("search")
@@ -180,10 +180,10 @@ export function ShortcutsConnectButtons({
 				{pendingType === "search" ? (
 					<Loader className="size-4 text-[#FAFAFA] animate-spin" />
 				) : (
-					<Search className="size-4 text-[#FAFAFA]" />
+					<Search className="size-4 shrink-0 text-[#FAFAFA]" />
 				)}
 				<span className="text-[13px] text-[#FAFAFA] font-medium whitespace-nowrap">
-					{pendingType === "search" ? "Creating..." : "Search memory shortcut"}
+					{pendingType === "search" ? "Creating..." : "Search"}
 				</span>
 			</PillButton>
 		</div>