From 8198459597f16460ec7c49bdcd0ae088859fc75a Mon Sep 17 00:00:00 2001
From: Roland Tannous <rolandtannous@gravityq.ai>
Date: Wed, 27 May 2026 17:56:28 +0400
Subject: [PATCH] Studio: anchor toasts to top-right, fix tight spacing in
 ingest stack

The RAG ingestion toast stack was pinned to bottom-right and rendered
its title and progress text with gap-0.5, so the stage label and
percentage rendered close enough to look concatenated (e.g.
'indexing5%') on narrow widths. The default Sonner toaster also
defaulted to bottom-right, so other notifications were inconsistent
with the new layout.

  - Move the ingestion toast stack to top-right.
  - Set Sonner's default position to top-right.
  - Bump vertical gap between title and progress (gap-1.5).
  - Add horizontal gap-3 between stage label and percentage, plus
    shrink-0 + tabular-nums on the percent so it never collides with
    the (truncatable) stage label.
---
 studio/frontend/src/components/ui/sonner.tsx              | 1 +
 .../src/features/rag/components/ingestion-progress.tsx    | 8 ++++----
 .../src/features/rag/components/ingestion-toast-stack.tsx | 6 +++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/studio/frontend/src/components/ui/sonner.tsx b/studio/frontend/src/components/ui/sonner.tsx
index 5bd3078761..0cae99ff2a 100644
--- a/studio/frontend/src/components/ui/sonner.tsx
+++ b/studio/frontend/src/components/ui/sonner.tsx
@@ -21,6 +21,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
     <Sonner
       theme={(resolvedTheme as ToasterProps["theme"]) ?? "light"}
       className="toaster group"
+      position="top-right"
       duration={5000}
       icons={{
         success: (
diff --git a/studio/frontend/src/features/rag/components/ingestion-progress.tsx b/studio/frontend/src/features/rag/components/ingestion-progress.tsx
index a5ab57937e..e00800e63b 100644
--- a/studio/frontend/src/features/rag/components/ingestion-progress.tsx
+++ b/studio/frontend/src/features/rag/components/ingestion-progress.tsx
@@ -55,10 +55,10 @@ export function IngestionProgress({
   const label = STAGE_LABELS[stage] ?? stage;
 
   return (
-    <div className={cn("flex flex-col gap-1", className)}>
-      <div className="flex justify-between text-xs text-muted-foreground">
-        <span>{label}</span>
-        <span>{Math.round(progress * 100)}%</span>
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <div className="flex items-center justify-between gap-3 text-xs text-muted-foreground">
+        <span className="truncate">{label}</span>
+        <span className="shrink-0 tabular-nums">{Math.round(progress * 100)}%</span>
       </div>
       <Progress value={Math.round(progress * 100)} className="h-1" />
     </div>
diff --git a/studio/frontend/src/features/rag/components/ingestion-toast-stack.tsx b/studio/frontend/src/features/rag/components/ingestion-toast-stack.tsx
index 0d89f20b09..570199fd42 100644
--- a/studio/frontend/src/features/rag/components/ingestion-toast-stack.tsx
+++ b/studio/frontend/src/features/rag/components/ingestion-toast-stack.tsx
@@ -55,7 +55,7 @@ export function IngestionToastStack() {
   if (visible.length === 0) return null;
 
   return (
-    <div className="pointer-events-none fixed right-4 bottom-4 z-50 flex w-72 flex-col gap-2">
+    <div className="pointer-events-none fixed right-4 top-4 z-50 flex w-72 flex-col gap-2">
       <AnimatePresence initial={false}>
         {visible.map(([jobId, event]) => {
           const isTerminal =
@@ -74,7 +74,7 @@ export function IngestionToastStack() {
               className="pointer-events-auto rounded-md border border-border bg-popover px-3 py-2 shadow-md"
             >
               <div className="flex items-start justify-between gap-2">
-                <div className="flex min-w-0 flex-col gap-0.5">
+                <div className="flex min-w-0 flex-col gap-1.5">
                   <span className="truncate text-xs font-medium">
                     {isError
                       ? "Ingestion failed"
@@ -82,7 +82,7 @@ export function IngestionToastStack() {
                         ? "Indexed"
                         : "Indexing document"}
                   </span>
-                  <IngestionProgress jobId={jobId} className="mt-0.5" />
+                  <IngestionProgress jobId={jobId} />
                 </div>
                 <Button
                   variant="ghost"