From 76c0e258d9e2667fed13ab75e2a4858bbfb39e3a Mon Sep 17 00:00:00 2001
From: "clagentic-builder[bot]"
 <290147524+clagentic-builder[bot]@users.noreply.github.com>
Date: Wed, 1 Jul 2026 15:17:41 -0400
Subject: [PATCH] fix(toast): top-anchor toast family on mobile to clear
 bottom-nav (lr-2fdd)

base .toast, .sw-update-banner, and .toast-diagnostic all hard-anchored
bottom:80px, occluding the mobile bottom-nav / input box / content
(iOS screenshot: PREFLIGHT WARNING toast covering the UPCOMING card
above the Projects/Chat/Team/More nav). Andy confirmed the SW
update/reload banner has the same issue.

Top-anchor the whole toast family at <=768px, using --safe-top so it
clears the notch/status bar, per Andy's steer ('should top align more
than bottom align'). Desktop placement unchanged.
---
 lib/public/css/base.css        | 18 ++++++++++++++++++
 lib/public/css/diagnostics.css |  8 ++++++++
 2 files changed, 26 insertions(+)

diff --git a/lib/public/css/base.css b/lib/public/css/base.css
index 1c0180a7..29e90a35 100644
--- a/lib/public/css/base.css
+++ b/lib/public/css/base.css
@@ -285,3 +285,21 @@ html, body {
   color: var(--text);
 }
 
+/* Mobile (lr-2fdd): bottom:80px occludes the bottom-nav / input box / content
+   on narrow viewports (iOS screenshot showed the toast covering content just
+   above the Projects/Chat/Team/More nav). Top-anchor instead — per Andy's
+   steer ("should top align more than bottom align") — clearing the notch /
+   status bar via the safe-area inset. Desktop placement is unchanged. */
+@media (max-width: 768px) {
+  .toast,
+  .sw-update-banner {
+    top: calc(var(--safe-top) + 12px);
+    bottom: auto;
+    transform: translateX(-50%) translateY(-8px);
+  }
+  .toast.visible,
+  .sw-update-banner.visible {
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
diff --git a/lib/public/css/diagnostics.css b/lib/public/css/diagnostics.css
index e6a6f0bb..8ecc0a54 100644
--- a/lib/public/css/diagnostics.css
+++ b/lib/public/css/diagnostics.css
@@ -264,6 +264,14 @@
     right: 16px;
     transform: translateY(8px);
     max-width: none;
+    /* lr-2fdd: bottom:80px (inherited from base .toast) occludes the
+       bottom-nav / input box / content on mobile (iOS screenshot showed
+       the PREFLIGHT WARNING toast covering the UPCOMING card just above
+       the Projects/Chat/Team/More nav). Top-anchor instead, matching the
+       base .toast / .sw-update-banner mobile fix so the whole toast
+       family lands the same way. */
+    top: calc(var(--safe-top) + 12px);
+    bottom: auto;
   }
   .toast-diagnostic.visible {
     transform: translateY(0);