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

fix: Make mobile header sticky/fixed and adjust content padding

Browse Source
This commit is contained in:
spinline
2026-01-31 01:05:49 +03:00
parent 537d3c5312
commit e8d025a193
2 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/public/tailwind.css
View File

@@ -227,9 +227,6 @@
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: calc(var(--spacing) * 0);
}
@@ -245,12 +242,18 @@
.top-4 {
top: calc(var(--spacing) * 4);
}
.right-0 {
right: calc(var(--spacing) * 0);
}
.right-4 {
right: calc(var(--spacing) * 4);
}
.bottom-0 {
bottom: calc(var(--spacing) * 0);
}
.left-0 {
left: calc(var(--spacing) * 0);
}
.left-4 {
left: calc(var(--spacing) * 4);
}
@@ -263,6 +266,9 @@
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}
@@ -815,6 +821,9 @@
.pt-6 {
padding-top: calc(var(--spacing) * 6);
}
.pt-\[88px\] {
padding-top: 88px;
}
.pr-4 {
padding-right: calc(var(--spacing) * 4);
}
@@ -1262,6 +1271,16 @@
padding: calc(var(--spacing) * 4);
}
}
.md\:sticky {
@media (width >= 48rem) {
position: sticky;
}
}
.md\:top-0 {
@media (width >= 48rem) {
top: calc(var(--spacing) * 0);
}
}
.md\:block {
@media (width >= 48rem) {
display: block;
@@ -1297,6 +1316,11 @@
border-radius: var(--radius-2xl);
}
}
.md\:pt-6 {
@media (width >= 48rem) {
padding-top: calc(var(--spacing) * 6);
}
}
.md\:pb-0 {
@media (width >= 48rem) {
padding-bottom: calc(var(--spacing) * 0);

4
frontend/src/app.rs
View File

@@ -364,7 +364,7 @@ pub fn App() -> impl IntoView {
// MAIN CONTENT
<main class="flex-1 h-screen overflow-y-auto overflow-x-hidden relative pb-24 md:pb-0">
<header class={format!("sticky top-0 z-10 border-b px-6 py-4 flex justify-between items-center {}", sidebar_bg)}>
<header class={format!("fixed top-0 left-0 right-0 md:sticky md:top-0 z-40 border-b px-6 py-4 flex justify-between items-center transition-colors duration-300 {}", sidebar_bg)}>
<div class="flex items-center gap-3">
<button class={format!("md:hidden p-1 -ml-2 hover:opacity-80 {}", text_sec)} on:click=move |_| set_show_mobile_sidebar.set(true)>
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
@@ -419,7 +419,7 @@ pub fn App() -> impl IntoView {
</div>
</header>
<div class="p-6 max-w-7xl mx-auto animate-in fade-in duration-500">
<div class="p-6 max-w-7xl mx-auto animate-in fade-in duration-500 pt-[88px] md:pt-6">
{move || if active_tab.get() == "settings" {
view! {
<div class="space-y-8">