From f2ca73182779f3768a5c147c81d1d658958a8c66 Mon Sep 17 00:00:00 2001
From: spinline <bilal.karatatr.@gmail.com>
Date: Thu, 5 Feb 2026 21:11:36 +0300
Subject: [PATCH] fix(frontend): fix toast positioning with wrapper div and
 inline styles

---
 frontend/src/app.rs              | 50 +++++++++++++++++---------------
 frontend/src/components/toast.rs | 16 ++++++----
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/frontend/src/app.rs b/frontend/src/app.rs
index 4214baf..5922a45 100644
--- a/frontend/src/app.rs
+++ b/frontend/src/app.rs
@@ -11,35 +11,39 @@ pub fn App() -> impl IntoView {
     crate::store::provide_torrent_store();
 
     view! {
-        <div class="drawer lg:drawer-open h-screen w-full" style="height: 100dvh;">
-            <input id="my-drawer" type="checkbox" class="drawer-toggle" />
+        // Main app wrapper - ensures proper stacking context
+        <div class="relative w-full h-screen" style="height: 100dvh;">
+            // Drawer layout
+            <div class="drawer lg:drawer-open h-full w-full">
+                <input id="my-drawer" type="checkbox" class="drawer-toggle" />
 
-            <div class="drawer-content flex flex-col h-full overflow-hidden bg-base-100 text-base-content text-sm select-none">
-                // Toolbar at the top
-                <Toolbar />
+                <div class="drawer-content flex flex-col h-full overflow-hidden bg-base-100 text-base-content text-sm select-none">
+                    // Toolbar at the top
+                    <Toolbar />
 
-                <main class="flex-1 flex flex-col min-w-0 bg-base-100 overflow-hidden">
-                    <Router>
-                        <Routes>
-                            <Route path="/" view=move || view! { <TorrentTable /> } />
-                            <Route path="/settings" view=move || view! { <div class="p-4">"Settings Page (Coming Soon)"</div> } />
-                        </Routes>
-                    </Router>
-                </main>
+                    <main class="flex-1 flex flex-col min-w-0 bg-base-100 overflow-hidden">
+                        <Router>
+                            <Routes>
+                                <Route path="/" view=move || view! { <TorrentTable /> } />
+                                <Route path="/settings" view=move || view! { <div class="p-4">"Settings Page (Coming Soon)"</div> } />
+                            </Routes>
+                        </Router>
+                    </main>
 
-                 // Status Bar at the bottom
-                <StatusBar />
-            </div>
+                     // Status Bar at the bottom
+                    <StatusBar />
+                </div>
 
-            <div class="drawer-side z-40 transition-none duration-0">
-                <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay transition-none duration-0"></label>
-                <div class="menu p-0 min-h-full bg-base-200 text-base-content border-r border-base-300 transition-none duration-0">
-                    <Sidebar />
+                <div class="drawer-side z-40 transition-none duration-0">
+                    <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay transition-none duration-0"></label>
+                    <div class="menu p-0 min-h-full bg-base-200 text-base-content border-r border-base-300 transition-none duration-0">
+                        <Sidebar />
+                    </div>
                 </div>
             </div>
+            
+            // Toast container - fixed positioning relative to viewport
+            <ToastContainer />
         </div>
-        
-        // Toast container - outside drawer for correct fixed positioning
-        <ToastContainer />
     }
 }
diff --git a/frontend/src/components/toast.rs b/frontend/src/components/toast.rs
index caac577..012a520 100644
--- a/frontend/src/components/toast.rs
+++ b/frontend/src/components/toast.rs
@@ -71,16 +71,22 @@ pub fn ToastContainer() -> impl IntoView {
     let notifications = store.notifications;
 
     view! {
-        <div class="fixed bottom-4 right-4 z-[9999] flex flex-col gap-2 items-end">
+        // Fixed to viewport with explicit inset values for reliable positioning
+        <div 
+            class="fixed flex flex-col gap-2 items-end pointer-events-none"
+            style="bottom: 16px; right: 16px; z-index: 99999;"
+        >
             <For
                 each=move || notifications.get()
                 key=|item| item.id
                 children=move |item| {
                     view! {
-                        <ToastItem
-                            level=item.notification.level
-                            message=item.notification.message
-                        />
+                        <div class="pointer-events-auto">
+                            <ToastItem
+                                level=item.notification.level
+                                message=item.notification.message
+                            />
+                        </div>
                     }
                 }
             />