From 5d4b94ecb223f79700fc438e603f0314080ca1a5 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Tue, 7 Jul 2026 18:58:06 +0300
Subject: [PATCH] fix(desktop): keep the update-ready toast inside the main
 window
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "installed — restart to apply" toast laid its message and buttons out
in a single horizontal row with no width cap, but the main window is only
330px wide, so the card overflowed the window's left edge and got clipped —
cutting off the first letter of each wrapped line and squashing the buttons.

Cap the card to the viewport width (max 24rem) and stack the actions below
the message so it renders cleanly in the narrow window.
---
 .../routes/(window-chrome)/new-main/index.tsx | 56 ++++++++++---------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
index 4f2860cb89..89b80c5cb2 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
@@ -1597,36 +1597,42 @@ function createUpdateReadyToast() {
 	createTauriEventListener(events.updateReady, (update) => {
 		toast.custom(
 			(t) => (
-				<div class="flex gap-3 items-center px-4 py-3 rounded-xl border shadow-lg bg-gray-1 border-gray-4 text-gray-12">
+				// The main window is only 330px wide, so the toast must fit inside it
+				// (never exceed the viewport) and stack its actions below the message
+				// rather than racing them on one line — otherwise the card overflows
+				// the window edge and gets clipped.
+				<div class="flex flex-col gap-2.5 px-4 py-3 rounded-xl border shadow-lg bg-gray-1 border-gray-4 text-gray-12 w-[min(24rem,calc(100vw-2rem))]">
 					<p class="text-sm">
 						{update.installed
 							? `Cap ${update.version} has been installed — restart to apply`
 							: `Cap ${update.version} is ready to install`}
 					</p>
-					<button
-						type="button"
-						class="px-2.5 py-1 text-xs font-medium rounded-lg transition-colors bg-blue-9 text-white hover:bg-blue-10"
-						onClick={() => {
-							toast.dismiss(t.id);
-							const install = update.installed
-								? Promise.resolve(null)
-								: commands.updatesDownloadAndInstall();
-							// On Windows the NSIS installer restarts Cap itself, so the
-							// relaunch call is unreachable there; that matches update.tsx.
-							install
-								.then(() => relaunch())
-								.catch((e) => console.error("Failed to install update:", e));
-						}}
-					>
-						{update.installed ? "Restart now" : "Install and restart"}
-					</button>
-					<button
-						type="button"
-						class="px-2.5 py-1 text-xs font-medium rounded-lg transition-colors text-gray-11 hover:text-gray-12"
-						onClick={() => toast.dismiss(t.id)}
-					>
-						Dismiss
-					</button>
+					<div class="flex gap-2 items-center">
+						<button
+							type="button"
+							class="px-2.5 py-1 text-xs font-medium rounded-lg transition-colors bg-blue-9 text-white hover:bg-blue-10"
+							onClick={() => {
+								toast.dismiss(t.id);
+								const install = update.installed
+									? Promise.resolve(null)
+									: commands.updatesDownloadAndInstall();
+								// On Windows the NSIS installer restarts Cap itself, so the
+								// relaunch call is unreachable there; that matches update.tsx.
+								install
+									.then(() => relaunch())
+									.catch((e) => console.error("Failed to install update:", e));
+							}}
+						>
+							{update.installed ? "Restart now" : "Install and restart"}
+						</button>
+						<button
+							type="button"
+							class="px-2.5 py-1 text-xs font-medium rounded-lg transition-colors text-gray-11 hover:text-gray-12"
+							onClick={() => toast.dismiss(t.id)}
+						>
+							Dismiss
+						</button>
+					</div>
 				</div>
 			),
 			{