Fix PayPal billing flow and mobile admin UX

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

@@ -5,7 +5,7 @@ import { YStack, XStack, SizableText as Text, Image } from 'tamagui';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { useTranslation } from 'react-i18next';
 import { useEventContext } from '../../context/EventContext';
-import { BottomNav, BOTTOM_NAV_HEIGHT, BOTTOM_NAV_PADDING, NavKey } from './BottomNav';
+import { BottomNav, NavKey } from './BottomNav';
 import { useMobileNav } from '../hooks/useMobileNav';
 import { ADMIN_EVENTS_PATH, adminPath } from '../../constants';
 import { MobileCard, CTAButton } from './Primitives';
@@ -302,6 +302,9 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
       backgroundColor={backgroundColor}
       minHeight="100vh"
       alignItems="center"
+      style={{
+        scrollPaddingBottom: 'var(--admin-bottom-nav-offset, calc(env(safe-area-inset-bottom, 0px) + 78px))',
+      }}
     >
       <YStack
         backgroundColor={headerSurface}
@@ -331,13 +334,12 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
       </YStack>
 
       <YStack
-        flex={1}
         padding="$4"
         gap="$3"
         width="100%"
         maxWidth={800}
         style={{
-          paddingBottom: `calc(env(safe-area-inset-bottom, 0px) + ${BOTTOM_NAV_HEIGHT + BOTTOM_NAV_PADDING}px)`,
+          paddingBottom: 'calc(var(--admin-bottom-nav-offset, calc(env(safe-area-inset-bottom, 0px) + 78px)) + 16px)',
         }}
       >
         {!online ? (