fix: restore pull-to-refresh while maintaining overscroll bounce prevention of page (#528)

Previous changes to prevent overscroll bounce behavior accidentally removed pull-to-refresh functionality on mobile browsers. This fixes both issues by making the navbar properly fixed and ensuring the background color is correctly applied to the page.

Author: muzzlol

src/components/Navbar.tsx

@@ -139,7 +139,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   const navbar = (
     <div
       className={twMerge(
-        'w-full p-2 sticky top-0 z-[100] bg-white/70 dark:bg-black/70 backdrop-blur-lg shadow-xl shadow-black/3',
+        'w-full p-2 fixed top-0 z-[100] bg-white/70 dark:bg-black/70 backdrop-blur-lg shadow-xl shadow-black/3',
         'flex items-center justify-between gap-4',
         'dark:border-b border-gray-500/20'
       )}
@@ -498,7 +498,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   const smallMenu = showMenu ? (
     <div
       className="lg:hidden bg-white/50 dark:bg-black/60 backdrop-blur-[20px] z-50
-    sticky top-[var(--navbar-height)] max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto
+    fixed top-[var(--navbar-height)] left-0 right-0 max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto
     "
     >
       <div
@@ -569,7 +569,8 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       <div
         className={twMerge(
           `min-h-[calc(100dvh-var(--navbar-height))] flex flex-col
-          min-w-0 lg:flex-row w-full transition-all duration-300`
+          min-w-0 lg:flex-row w-full transition-all duration-300
+          pt-[var(--navbar-height)]`
         )}
       >
         {smallMenu}

src/styles/app.css

@@ -2,7 +2,7 @@
 
 @plugin "@tailwindcss/typography";
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:is(.dark, .dark *));
 @custom-variant light (&:is(.light, .light *));
 @custom-variant auto (&:is(.auto, .auto *));
 @custom-variant aria-current (&[aria-current="location"]);
@@ -68,7 +68,6 @@ button {
   html,
   body {
     @apply text-gray-900 bg-gray-50 dark:bg-gray-900 dark:text-gray-200;
-    overscroll-behavior: none;
   }
 
   .using-mouse * {