Stack toasts in the canvas's bottom-right corner

They were pinned to the window at a guessed sidebar width, so they
landed on the sidebar's edge. They now anchor to the canvas, stack
upward from its bottom-right, and rise above the YAML pane when it is
open.

Author: markbackman

components/EditorShell.tsx

@@ -773,9 +773,9 @@ export default function EditorShell() {
             />
           </div>
         )}
+        <ToastContainer />
       </div>
       {!showStart && <YamlPanel text={yamlText} problems={yamlProblems} onChange={onYamlChange} />}
-      <ToastContainer />
     </div>
   );
 }

components/ui/Toast.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useState } from "react";
 
+import { useEditorStore } from "@/lib/store/editorStore";
+
 type ToastType = "success" | "error" | "info";
 
 type Toast = {
@@ -28,8 +30,15 @@ export function showToast(message: string, type: ToastType = "info") {
   }, 4000);
 }
 
+/**
+ * Toasts stack up from the canvas's bottom-right corner, clear of the
+ * toolbar, the zoom controls, and the YAML tab, and above the YAML pane
+ * when it is open. Mount it inside the canvas container.
+ */
 export default function ToastContainer() {
   const [current, setCurrent] = useState<Toast[]>([]);
+  const showYaml = useEditorStore((state) => state.showYaml);
+  const yamlHeight = useEditorStore((state) => state.yamlPanelHeight);
 
   useEffect(() => {
     listeners.add(setCurrent);
@@ -39,7 +48,10 @@ export default function ToastContainer() {
   }, []);
 
   return (
-    <div className="pointer-events-none fixed right-76 top-20 z-50 flex flex-col gap-2">
+    <div
+      className="pointer-events-none absolute right-4 z-40 flex flex-col-reverse items-end gap-2 transition-[bottom] duration-300"
+      style={{ bottom: showYaml ? yamlHeight + 16 : 16 }}
+    >
       {current.map((toast) => (
         <div
           key={toast.id}