From 23aecdd3f991837b3e1c8b90a41da8c69b67db3b Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Mon, 2 Mar 2026 17:56:54 -0800
Subject: [PATCH] Fix toast and megaphone overlay

---
 stylesheets/components/ToastManager.scss | 22 ++++++++++++----------
 ts/components/ToastManager.dom.tsx       | 24 ++++++++++++------------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/stylesheets/components/ToastManager.scss b/stylesheets/components/ToastManager.scss
index 65b910b636..fc801a6321 100644
--- a/stylesheets/components/ToastManager.scss
+++ b/stylesheets/components/ToastManager.scss
@@ -3,20 +3,21 @@
 
 @use '../variables';
 
-.ToastManager {
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
-
-  gap: 16px;
-
+.ToastManagerContainer {
   // Sync inner width with left pane
   position: fixed;
   width: inherit;
   bottom: 0;
   z-index: variables.$z-index-toast;
+  pointer-events: none;
+}
 
-  padding: 16px;
+.ToastManager {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 16px;
+  margin: 16px;
+  pointer-events: none;
 
   & * {
     pointer-events: auto;
@@ -43,6 +44,7 @@
 }
 
 .ToastManager--narrow-sidebar.ToastManager--composition-area-visible {
+  position: fixed;
   inset-inline-start: 0;
   width: 100%;
   align-items: center;
@@ -56,9 +58,9 @@
 }
 
 .ToastManager--megaphones {
-  padding: 12px;
+  margin: 12px;
 }
 
 .ToastManager--megaphones.ToastManager--narrow-sidebar {
-  padding: 10px;
+  margin: 10px;
 }
diff --git a/ts/components/ToastManager.dom.tsx b/ts/components/ToastManager.dom.tsx
index 833c357591..8179dceb4b 100644
--- a/ts/components/ToastManager.dom.tsx
+++ b/ts/components/ToastManager.dom.tsx
@@ -1026,17 +1026,7 @@ export function ToastManager(props: PropsType): React.JSX.Element {
   const toast = renderToast(props);
 
   return (
-    <>
-      {megaphone && (
-        <div
-          className={classNames('ToastManager', 'ToastManager--megaphones', {
-            'ToastManager--narrow-sidebar':
-              containerWidthBreakpoint === WidthBreakpoint.Narrow,
-          })}
-        >
-          {renderMegaphone(props)}
-        </div>
-      )}
+    <div className="ToastManagerContainer">
       <div
         className={classNames('ToastManager', {
           'ToastManager--narrow-sidebar':
@@ -1057,6 +1047,16 @@ export function ToastManager(props: PropsType): React.JSX.Element {
             )
           : toast}
       </div>
-    </>
+      {megaphone && (
+        <div
+          className={classNames('ToastManager', 'ToastManager--megaphones', {
+            'ToastManager--narrow-sidebar':
+              containerWidthBreakpoint === WidthBreakpoint.Narrow,
+          })}
+        >
+          {renderMegaphone(props)}
+        </div>
+      )}
+    </div>
   );
 }