Fix PayPal billing flow and mobile admin UX

resources/js/guest/components/BottomNav.tsx

@@ -54,6 +54,7 @@ export default function BottomNav() {
   const { event, status } = useEventData();
   const { t } = useTranslation();
   const { branding } = useEventBranding();
+  const navRef = React.useRef<HTMLDivElement | null>(null);
   const radius = branding.buttons?.radius ?? 12;
   const buttonStyle = branding.buttons?.style ?? 'filled';
   const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
@@ -83,9 +84,46 @@ export default function BottomNav() {
 
   const compact = isUploadActive;
   const navPaddingBottom = `calc(env(safe-area-inset-bottom, 0px) + ${compact ? 12 : 18}px)`;
+  const setBottomOffset = React.useCallback(() => {
+    if (typeof document === 'undefined' || !navRef.current) {
+      return;
+    }
+
+    const height = Math.ceil(navRef.current.getBoundingClientRect().height);
+    document.documentElement.style.setProperty('--guest-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('--guest-bottom-nav-offset');
+      };
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      document.documentElement.style.removeProperty('--guest-bottom-nav-offset');
+    };
+  }, [setBottomOffset, compact]);
 
   return (
     <div
+      ref={navRef}
       className={`guest-bottom-nav fixed inset-x-0 bottom-0 z-30 border-t border-white/15 bg-gradient-to-t from-black/55 via-black/30 to-black/5 px-4 shadow-2xl backdrop-blur-xl transition-all duration-200 dark:border-white/10 dark:from-gray-950/85 dark:via-gray-900/55 dark:to-gray-900/20 ${
         compact ? 'pt-1' : 'pt-2 pb-1'
       }`}