From 9232126734a2a8a7088edb1f52b9c71082f38ced Mon Sep 17 00:00:00 2001
From: Lee Jackson <130007945+Imagineer99@users.noreply.github.com>
Date: Wed, 18 Mar 2026 05:39:51 +0000
Subject: [PATCH] fix(studio): use explicit Cancel for model load toast (#4377)

---
 .../features/chat/components/model-load-status.tsx    | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/studio/frontend/src/features/chat/components/model-load-status.tsx b/studio/frontend/src/features/chat/components/model-load-status.tsx
index ad9946b0fe..afec327a0f 100644
--- a/studio/frontend/src/features/chat/components/model-load-status.tsx
+++ b/studio/frontend/src/features/chat/components/model-load-status.tsx
@@ -4,7 +4,6 @@
 import { Progress } from "@/components/ui/progress";
 import { Spinner } from "@/components/ui/spinner";
 import { Button } from "@/components/ui/button";
-import { XIcon } from "lucide-react";
 
 type ModelLoadDescriptionProps = {
   title?: string | null;
@@ -28,11 +27,11 @@ export function ModelLoadDescription({
   const hasProgress = typeof progressPercent === "number";
 
   return (
-    <div className="flex min-h-12 w-full items-stretch gap-2">
+    <div className="relative flex min-h-12 w-full items-stretch gap-2">
       <div className="flex h-full shrink-0 items-center self-center">
         <Spinner className="size-4 text-foreground" />
       </div>
-      <div className="min-w-0 flex-1">
+      <div className="min-w-0 flex-1 pr-5">
         {title ? <p className="text-foreground leading-5 font-semibold">{title}</p> : null}
         {hasProgress ? (
           <div className="w-full pt-1">
@@ -49,13 +48,13 @@ export function ModelLoadDescription({
       {onStop ? (
         <Button
           type="button"
-          size="icon-sm"
+          size="xs"
           variant="ghost"
           aria-label="Stop model loading"
-          className="h-auto w-10 self-stretch shrink-0 rounded-xl text-muted-foreground hover:bg-destructive/10 hover:text-destructive focus-visible:text-destructive"
+          className="h-auto self-stretch shrink-0 !rounded-none !border-0 bg-transparent px-1 text-[10px] text-muted-foreground hover:bg-transparent hover:text-destructive focus-visible:text-destructive"
           onClick={onStop}
         >
-          <XIcon className="size-3.5" />
+          Cancel
         </Button>
       ) : null}
     </div>