JDM170/spotizerr-dev
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix config fallback checking logic and PWA scrolling

Browse Source
This commit is contained in:
Xoconoch
2025-08-08 11:57:02 -06:00
parent 4ab2f818d4
commit 326ed035d8
5 changed files with 30 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
spotizerr-ui/src/index.css
View File

@@ -185,23 +185,21 @@
/* PWA specific body styling */
body {
background: var(--color-surface);
overscroll-behavior: none;
}
.dark body {
background: var(--color-surface-dark);
}
/* PWA viewport fixes */
html {
height: 100vh;
height: 100dvh; /* Dynamic viewport height for mobile */
html, body {
height: 100%;
min-height: 100%;
}
body {
min-height: 100vh;
min-height: 100dvh;
margin: 0;
padding: 0;
overflow-y: auto;
}
a {
@@ -232,6 +230,8 @@
.pwa-main {
padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right);
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}
}

4
spotizerr-ui/src/lib/api-client.ts
View File

@@ -32,8 +32,8 @@ class AuthApiClient {
// Request interceptor to add auth token
this.apiClient.interceptors.request.use(
(config) => {
// Only add auth header if auth is enabled and we have a token
if (this.authEnabled && this.token) {
// Add auth header whenever we have a token so startup validation works before authEnabled is known
if (this.token) {
config.headers.Authorization = `Bearer ${this.token}`;
}
return config;

35
spotizerr-ui/src/routes/home.tsx
View File

@@ -40,40 +40,7 @@ export const Home = () => {
const context = useContext(QueueContext);
const loaderRef = useRef<HTMLDivElement | null>(null);
// Prevent scrolling on mobile only when there are no results (empty state)
useEffect(() => {
const isMobile = window.innerWidth < 768; // md breakpoint
if (!isMobile) return;
// Only prevent scrolling when there are no results to show
const shouldPreventScroll = !isLoading && displayedResults.length === 0 && !query.trim();
if (!shouldPreventScroll) return;
// Store original styles
const originalOverflow = document.body.style.overflow;
const originalHeight = document.body.style.height;
// Find the mobile main content container
const mobileMain = document.querySelector('.pwa-main') as HTMLElement;
const originalMainOverflow = mobileMain?.style.overflow;
// Prevent body and main container scrolling on mobile when empty
document.body.style.overflow = 'hidden';
document.body.style.height = '100vh';
if (mobileMain) {
mobileMain.style.overflow = 'hidden';
}
// Cleanup function
return () => {
document.body.style.overflow = originalOverflow;
document.body.style.height = originalHeight;
if (mobileMain) {
mobileMain.style.overflow = originalMainOverflow;
}
};
}, [isLoading, displayedResults.length, query]);
// Removed scroll locking on mobile empty state to avoid blocking scroll globally
useEffect(() => {
navigate({ search: (prev) => ({ ...prev, q: debouncedQuery, type: searchType }) });

14
spotizerr-ui/src/routes/root.tsx
View File

@@ -82,9 +82,9 @@ function AppLayout() {
const { toggleVisibility, totalTasks } = useContext(QueueContext) || {};
return (
<div className="min-h-screen bg-gradient-to-br from-surface-secondary via-surface-muted to-surface-accent dark:from-surface-dark dark:via-surface-muted-dark dark:to-surface-secondary-dark text-content-primary dark:text-content-primary-dark flex flex-col">
<div className="min-h-screen bg-gradient-to-br from-surface-secondary via-surface-muted to-surface-accent dark:from-surface-dark dark:via-surface-muted-dark dark:to-surface-secondary-dark text-content-primary dark:text-content-primary-dark flex flex-col overflow-hidden">
{/* Desktop Header */}
<header className="hidden md:block sticky top-0 z-40 w-full border-b border-border dark:border-border-dark bg-surface-overlay dark:bg-surface-overlay-dark backdrop-blur-sm">
<header className="hidden md:block sticky top-0 z-50 w-full border-b border-border dark:border-border-dark bg-surface dark:bg-surface-dark">
<div className="container mx-auto h-14 flex items-center justify-between">
<Link to="/" className="flex items-center">
<img src="/spotizerr.svg" alt="Spotizerr" className="h-8 w-auto logo" />
@@ -119,9 +119,9 @@ function AppLayout() {
</main>
{/* Mobile Layout Container */}
<div className="md:hidden flex flex-col h-screen">
<div className="md:hidden flex flex-col min-h-screen overflow-hidden">
{/* Mobile Header - Fixed */}
<header className="fixed top-0 left-0 right-0 z-40 border-b border-border dark:border-border-dark bg-surface-overlay dark:bg-surface-overlay-dark backdrop-blur-sm pwa-header">
<header className="fixed top-0 left-0 right-0 z-50 border-b border-border dark:border-border-dark bg-surface dark:bg-surface-dark pwa-header">
<div className="container mx-auto h-14 flex items-center justify-between px-4">
<Link to="/" className="flex items-center">
<img src="/spotizerr.svg" alt="Spotizerr" className="h-8 w-auto logo" />
@@ -131,12 +131,12 @@ function AppLayout() {
</div>
</header>
{/* Mobile Main Content - Scrollable container */}
<main className="flex-1 overflow-y-auto mt-14 mb-16 pwa-main">
{/* Mobile Main Content - Constrained scroll area between headers */}
<div className="fixed top-14 bottom-16 left-0 right-0 overflow-y-auto pwa-main bg-gradient-to-br from-surface-secondary via-surface-muted to-surface-accent dark:from-surface-dark dark:via-surface-muted-dark dark:to-surface-secondary-dark">
<div className="container mx-auto p-4">
<Outlet />
</div>
</main>
</div>
{/* Mobile Bottom Navigation - Fixed */}
<nav className="fixed bottom-0 left-0 right-0 z-40 border-t border-border dark:border-border-dark bg-surface-overlay dark:bg-surface-overlay-dark backdrop-blur-md pwa-footer">