style upgrades

src/features/core/components/layout.tsx

@@ -6,6 +6,7 @@ import Pullable from './pullable';
 import useVisualViewportSize from '../hooks/use-visual-viewport-size';
 import useRouterConfig from '../hooks/use-router-config';
 import Page from '@/components/page';
+import './route-transition.css';
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => {
   const { header } = useRouterConfig();
@@ -37,15 +38,15 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
         // top: viewport.top
       }}
     >
-      <Header {...header} />
+      <Header {...header} elevated={scrollPosition.y > 2} />
       <AppShell.Main
         pos='relative'
         h='100%'
         mah='100%'
-        pb={{ base: 65, sm: 0 }}
+        pb={{ base: 'calc(65px + env(safe-area-inset-bottom, 0px))', sm: 0 }}
         px={{ base: 0.01, sm: 100, md: 200, lg: 300 }}
         maw='100dvw'
-        style={{ transition: 'none', overflow: 'hidden' }}
+        style={{ overflow: 'hidden' }}
       >
         <Pullable scrollPosition={scrollPosition} onScrollPositionChange={setScrollPosition}>
           <Page noPadding={!withPadding} fullWidth={fullWidth}>