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
This commit is contained in:
Claude 2026-06-17 21:26:15 +00:00
parent d4a3a57a42
commit 225c86099b
No known key found for this signature in database

View file

@ -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>