skeletons, tournament stats, polish, bug fixes

src/features/core/components/layout.tsx

@@ -31,14 +31,18 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
       pos='relative'
       h='100dvh'
       mah='100dvh'
-      style={{ top: viewport.top }} //, transition: 'top 0.1s ease-in-out' }}
+      style={{
+        top: 0,
+        minHeight: '100dvh',
+        maxHeight: '100dvh'
+      }}
     >
       <Header {...header} />
       <AppShell.Main
         pos='relative'
         h='100%'
         mah='100%'
-        pb={{ base: 70, md: 0 }}
+        pb={{ base: 65, md: 0 }}
         px={{ base: 0.01, sm: 100, md: 200, lg: 300 }}
         maw='100dvw'
         style={{ transition: 'none', overflow: 'hidden' }}

src/features/core/components/navbar.tsx

@@ -13,7 +13,7 @@ const Navbar = () => {
   const links = useLinks(user?.id, roles);
 
   if (isMobile) return (
-    <Paper component='nav' role='navigation' withBorder radius='lg' h='4rem' w='calc(100% - 2rem)' shadow='sm' pos='fixed' m='1rem' bottom='0' style={{ zIndex: 10 }}>
+    <Paper component='nav' role='navigation' withBorder radius='lg' h='4rem' w='calc(100% - 1rem)' shadow='sm' pos='fixed' m='0.5rem' bottom='0' style={{ zIndex: 10 }}>
       <Group gap='xs' justify='space-around' h='100%' w='100%' px={{ base: 12, sm: 0 }}>
         {links.map((link) => (
           <NavLink key={link.href} {...link} />

src/features/core/components/pullable.tsx

@@ -4,6 +4,7 @@ import useAppShellHeight from "@/hooks/use-appshell-height";
 import { ArrowClockwiseIcon, SpinnerIcon } from "@phosphor-icons/react";
 import { useQueryClient } from "@tanstack/react-query";
 import useRouterConfig from "../hooks/use-router-config";
+import { useLocation } from "@tanstack/react-router";
 
 const THRESHOLD = 80;
 
@@ -21,6 +22,8 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
   const [scrolling, setScrolling] = useState(false);
   const { refresh } = useRouterConfig();
   const queryClient = useQueryClient();
+  const location = useLocation();
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
 
   const scrollY = useMemo(() => scrollPosition.y < 0 && scrolling ? Math.abs(scrollPosition.y) : 0, [scrollPosition.y, scrolling]);
 
@@ -79,6 +82,21 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
 		return () => void ac.abort();
 	}, []);
 
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (scrollAreaRef.current) {
+        const viewport = scrollAreaRef.current.querySelector('.mantine-ScrollArea-viewport') as HTMLElement;
+        if (viewport) {
+          viewport.scrollTop = 0;
+          viewport.scrollLeft = 0;
+        }
+      }
+      onScrollPositionChange({ x: 0, y: 0 });
+    }, 10);
+
+    return () => clearTimeout(timeoutId);
+  }, [location.pathname, onScrollPositionChange]);
+
 
   return (
     <>
@@ -103,6 +121,7 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
         />
       </Flex>
       <ScrollArea
+        ref={scrollAreaRef}
         id='scroll-wrapper'
         onScrollPositionChange={onScrollPositionChange}
         type='never' mah='100%' h='100%'