fix(ui): add safe area padding for mobile notch support

This commit is contained in:
spinline
2026-02-06 12:55:41 +03:00
parent 68b517a336
commit 5b0fab80fe
2 changed files with 10 additions and 10 deletions

View File

@@ -75,7 +75,7 @@ pub fn Sidebar() -> impl IntoView {
}; };
view! { view! {
<div class="w-64 h-full flex flex-col bg-base-200 border-r border-base-300"> <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="p-2"> <div class="p-2">
<ul class="menu w-full rounded-box gap-1"> <ul class="menu w-full rounded-box gap-1">
<li class="menu-title text-primary uppercase font-bold px-4">"Filters"</li> <li class="menu-title text-primary uppercase font-bold px-4">"Filters"</li>

View File

@@ -6,15 +6,15 @@ pub fn Toolbar() -> impl IntoView {
let store = use_context::<crate::store::TorrentStore>().expect("store not provided"); let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
view! { view! {
<div class="navbar min-h-14 h-14 bg-base-100 p-0"> <div class="navbar min-h-14 h-auto bg-base-100 p-0 pt-[env(safe-area-inset-top)]">
<div class="navbar-start gap-4 px-4"> <div class="navbar-start gap-4 px-4">
<label for="my-drawer" class="btn btn-square btn-ghost lg:hidden drawer-button"> <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> <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>
</label> </label>
<div class="flex gap-2"> <div class="flex gap-2">
<button <button
class="btn btn-sm btn-primary gap-2 font-normal" class="btn btn-sm btn-primary gap-2 font-normal"
title="Add Magnet Link" title="Add Magnet Link"
on:click=move |_| set_show_add_modal.set(true) on:click=move |_| set_show_add_modal.set(true)
> >
@@ -30,10 +30,10 @@ pub fn Toolbar() -> impl IntoView {
<div class="navbar-end gap-2 px-4"> <div class="navbar-end gap-2 px-4">
<div class="join"> <div class="join">
<input <input
type="text" type="text"
placeholder="Search..." placeholder="Search..."
class="input input-sm input-bordered join-item w-full max-w-xs focus:outline-none" class="input input-sm input-bordered join-item w-full max-w-xs focus:outline-none"
prop:value=move || store.search_query.get() prop:value=move || store.search_query.get()
on:input=move |ev| store.search_query.set(event_target_value(&ev)) on:input=move |ev| store.search_query.set(event_target_value(&ev))
on:keydown=move |ev: web_sys::KeyboardEvent| { on:keydown=move |ev: web_sys::KeyboardEvent| {
@@ -43,7 +43,7 @@ pub fn Toolbar() -> impl IntoView {
} }
/> />
<Show when=move || !store.search_query.get().is_empty()> <Show when=move || !store.search_query.get().is_empty()>
<button <button
class="btn btn-sm btn-ghost join-item border-base-content/20 border-l-0 px-2" class="btn btn-sm btn-ghost join-item border-base-content/20 border-l-0 px-2"
title="Clear Search" title="Clear Search"
on:click=move |_| store.search_query.set(String::new()) on:click=move |_| store.search_query.set(String::new())