admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

fix(frontend): fix toast positioning with wrapper div and inline styles

Browse Source
This commit is contained in:
spinline
2026-02-05 21:11:36 +03:00
parent 0b935638af
commit f2ca731827
2 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/app.rs
View File

@@ -11,35 +11,39 @@ pub fn App() -> impl IntoView {
crate::store::provide_torrent_store(); crate::store::provide_torrent_store();
view! { view! {
<div class="drawer lg:drawer-open h-screen w-full" style="height: 100dvh;"> // Main app wrapper - ensures proper stacking context
<input id="my-drawer" type="checkbox" class="drawer-toggle" /> <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"> <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 at the top
<Toolbar /> <Toolbar />
<main class="flex-1 flex flex-col min-w-0 bg-base-100 overflow-hidden"> <main class="flex-1 flex flex-col min-w-0 bg-base-100 overflow-hidden">
<Router> <Router>
<Routes> <Routes>
<Route path="/" view=move || view! { <TorrentTable /> } /> <Route path="/" view=move || view! { <TorrentTable /> } />
<Route path="/settings" view=move || view! { <div class="p-4">"Settings Page (Coming Soon)"</div> } /> <Route path="/settings" view=move || view! { <div class="p-4">"Settings Page (Coming Soon)"</div> } />
</Routes> </Routes>
</Router> </Router>
</main> </main>
// Status Bar at the bottom // Status Bar at the bottom
<StatusBar /> <StatusBar />
</div> </div>
<div class="drawer-side z-40 transition-none duration-0"> <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> <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"> <div class="menu p-0 min-h-full bg-base-200 text-base-content border-r border-base-300 transition-none duration-0">
<Sidebar /> <Sidebar />
</div>
</div> </div>
</div> </div>
</div>
// Toast container - outside drawer for correct fixed positioning // Toast container - fixed positioning relative to viewport
<ToastContainer /> <ToastContainer />
</div>
} }
} }

16
frontend/src/components/toast.rs
View File

@@ -71,16 +71,22 @@ pub fn ToastContainer() -> impl IntoView {
let notifications = store.notifications; let notifications = store.notifications;
view! { 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 <For
each=move || notifications.get() each=move || notifications.get()
key=|item| item.id key=|item| item.id
children=move |item| { children=move |item| {
view! { view! {
<ToastItem <div class="pointer-events-auto">
level=item.notification.level <ToastItem
message=item.notification.message level=item.notification.level
/> message=item.notification.message
/>
</div>
} }
} }
/> />