From e10b252effdd653efebd5199c0d39eac94123703 Mon Sep 17 00:00:00 2001
From: spinline <bilal.karatatr.@gmail.com>
Date: Fri, 6 Feb 2026 13:13:53 +0300
Subject: [PATCH] fix(ui): use configured safe-area spacing for notch support

---
 frontend/src/components/layout/sidebar.rs | 2 +-
 frontend/src/components/layout/toolbar.rs | 2 +-
 frontend/tailwind.config.js               | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/layout/sidebar.rs b/frontend/src/components/layout/sidebar.rs
index 89280ba..db17eb9 100644
--- a/frontend/src/components/layout/sidebar.rs
+++ b/frontend/src/components/layout/sidebar.rs
@@ -75,7 +75,7 @@ pub fn Sidebar() -> impl IntoView {
     };
 
     view! {
-        <div class="w-64 h-full flex flex-col bg-base-200 border-r border-base-300 pt-[env(safe-area-inset-top)]">
+        <div class="w-64 h-full flex flex-col bg-base-200 border-r border-base-300 pt-safe-top">
             <div class="p-2">
                 <ul class="menu w-full rounded-box gap-1">
                     <li class="menu-title text-primary uppercase font-bold px-4">"Filters"</li>
diff --git a/frontend/src/components/layout/toolbar.rs b/frontend/src/components/layout/toolbar.rs
index 79753a3..99a4cca 100644
--- a/frontend/src/components/layout/toolbar.rs
+++ b/frontend/src/components/layout/toolbar.rs
@@ -6,7 +6,7 @@ pub fn Toolbar() -> impl IntoView {
     let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
 
     view! {
-        <div class="navbar min-h-14 h-auto bg-base-100 p-0 pt-[env(safe-area-inset-top)]">
+        <div class="navbar min-h-14 h-auto bg-base-100 p-0 pt-safe-top">
             <div class="navbar-start gap-4 px-4">
                 <label for="my-drawer" class="btn btn-square btn-ghost lg:hidden drawer-button">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 07e3c0b..6d4f46b 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -3,6 +3,10 @@ module.exports = {
   content: ["./index.html", "./src/**/*.{rs,html}"],
   theme: {
     extend: {
+      spacing: {
+        "safe-top": "env(safe-area-inset-top)",
+        "safe-bottom": "env(safe-area-inset-bottom)",
+      },
       colors: {
         gray: {
           900: "#111827",