Fix toast and megaphone overlay

Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>

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;
 }

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>
   );
 }