From 9ee67c343d7507118bfbbd547ec4b4a4ecdc40ec Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <paul@aider.chat>
Date: Fri, 14 Mar 2025 08:13:11 -0700
Subject: [PATCH] fix: Show toast notifications in fullscreen mode

---
 aider/website/examples/recording.md | 39 +++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/aider/website/examples/recording.md b/aider/website/examples/recording.md
index 9f1115f2f..1198b3051 100644
--- a/aider/website/examples/recording.md
+++ b/aider/website/examples/recording.md
@@ -57,11 +57,11 @@ layout: minimal
 
 /* Toast notification styling */
 .toast-container {
-  position: absolute;
+  position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 1000;
+  z-index: 9999;
   pointer-events: none;
 }
 
@@ -162,7 +162,34 @@ document.addEventListener('DOMContentLoaded', function() {
   
   // Function to display toast notification
   function showToast(text) {
-    const toastContainer = document.getElementById('toast-container');
+    // Get the appropriate container based on fullscreen state
+    let container = document.getElementById('toast-container');
+    const isFullscreen = document.fullscreenElement || 
+                         document.webkitFullscreenElement || 
+                         document.mozFullScreenElement || 
+                         document.msFullscreenElement;
+    
+    // If in fullscreen, check if we need to create a fullscreen toast container
+    if (isFullscreen) {
+      // Target the fullscreen element as the container parent
+      const fullscreenElement = document.fullscreenElement || 
+                               document.webkitFullscreenElement || 
+                               document.mozFullScreenElement || 
+                               document.msFullscreenElement;
+      
+      // Look for an existing fullscreen toast container
+      let fsContainer = fullscreenElement.querySelector('.fs-toast-container');
+      
+      if (!fsContainer) {
+        // Create a new container for fullscreen mode
+        fsContainer = document.createElement('div');
+        fsContainer.className = 'toast-container fs-toast-container';
+        fsContainer.id = 'fs-toast-container';
+        fullscreenElement.appendChild(fsContainer);
+      }
+      
+      container = fsContainer;
+    }
     
     // Create toast element
     const toast = document.createElement('div');
@@ -170,7 +197,7 @@ document.addEventListener('DOMContentLoaded', function() {
     toast.textContent = text;
     
     // Add to container
-    toastContainer.appendChild(toast);
+    container.appendChild(toast);
     
     // Trigger animation
     setTimeout(() => {
@@ -181,7 +208,9 @@ document.addEventListener('DOMContentLoaded', function() {
     setTimeout(() => {
       toast.style.opacity = '0';
       setTimeout(() => {
-        toastContainer.removeChild(toast);
+        if (container && container.contains(toast)) {
+          container.removeChild(toast);
+        }
       }, 300); // Wait for fade out animation
     }, 3000);
   }