From 66504b49d51d52e87f580365287edf5be25524c0 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 21 Jul 2026 08:04:53 -0500
Subject: [PATCH] fix(ui): keep update banner clear of the toast viewport on
 small screens

Address Greptile review: below md the bottom-left toast viewport spans the
width, so the update banner now sits top-right on small screens and moves to
bottom-right from md up, so the two never overlap.
---
 ui/src/components/AppUpdateBanner.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/AppUpdateBanner.tsx b/ui/src/components/AppUpdateBanner.tsx
index 64e196dcbb5..78b940339fb 100644
--- a/ui/src/components/AppUpdateBanner.tsx
+++ b/ui/src/components/AppUpdateBanner.tsx
@@ -26,7 +26,10 @@ export function AppUpdateBanner() {
     <aside
       role="status"
       aria-live="polite"
-      className="fixed bottom-3 right-3 z-(--z-120) w-full max-w-sm px-1"
+      // Below md the toast viewport (bottom-left, w-full) spans the width, so
+      // sit at the top to avoid overlapping it; from md up there is room for
+      // both bottom corners.
+      className="fixed right-3 top-3 z-(--z-120) w-full max-w-sm px-1 md:top-auto md:bottom-3"
     >
       <div className="pointer-events-auto rounded-sm border border-sky-300 bg-sky-50 text-sky-900 shadow-lg backdrop-blur-xl dark:border-sky-500/25 dark:bg-sky-950/60 dark:text-sky-100">
         <div className="flex items-start gap-3 px-3 py-2.5">