Fix PayPal billing flow and mobile admin UX

resources/js/admin/mobile/components/BottomNav.tsx

@@ -18,6 +18,7 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
   const { t } = useTranslation('mobile');
   const location = useLocation();
   const theme = useAdminTheme();
+  const navRef = React.useRef<HTMLDivElement | null>(null);
   
   // Modern Glass Background
   const navSurface = theme.glassSurfaceStrong ?? theme.surfaceMuted ?? theme.surface;
@@ -35,8 +36,46 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
     { key: 'profile', icon: User, label: t('nav.profile', 'Profile') },
   ];
 
+  const setBottomOffset = React.useCallback(() => {
+    if (typeof document === 'undefined' || !navRef.current) {
+      return;
+    }
+
+    const height = Math.ceil(navRef.current.getBoundingClientRect().height);
+    document.documentElement.style.setProperty('--admin-bottom-nav-offset', `${height}px`);
+  }, []);
+
+  React.useLayoutEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    setBottomOffset();
+
+    const handleResize = () => setBottomOffset();
+    if (typeof ResizeObserver !== 'undefined' && navRef.current) {
+      const observer = new ResizeObserver(() => setBottomOffset());
+      observer.observe(navRef.current);
+      window.addEventListener('resize', handleResize);
+
+      return () => {
+        observer.disconnect();
+        window.removeEventListener('resize', handleResize);
+        document.documentElement.style.removeProperty('--admin-bottom-nav-offset');
+      };
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      document.documentElement.style.removeProperty('--admin-bottom-nav-offset');
+    };
+  }, [setBottomOffset]);
+
   return (
     <YStack
+      ref={navRef as any}
       position="fixed"
       bottom={0}
       left={0}