fix(ui): use configured safe-area spacing for notch support

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>

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>

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",