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}

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 ? (

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ChevronRight, CreditCard, FileText, HelpCircle, Moon, Sun, User, X } from 'lucide-react';
+import { ChevronRight, CreditCard, FileText, HelpCircle, Monitor, Moon, Sun, User, X } from 'lucide-react';
 import { XStack, YStack, SizableText as Text, ListItem, YGroup, Separator } from 'tamagui';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { ToggleGroup } from '@tamagui/toggle-group';
@@ -32,6 +32,12 @@ export function UserMenuSheet({ open, onClose, user, isMember, navigate }: UserM
   }, [i18n.language]);
 
   const themeValue: 'light' | 'dark' = (appearance === 'system' ? resolved : appearance) ?? 'light';
+  const selectedAppearance: 'light' | 'dark' | 'system' = appearance ?? 'system';
+  const resolvedLabel =
+    themeValue === 'dark'
+      ? t('mobileProfile.themeDark', 'Dark')
+      : t('mobileProfile.themeLight', 'Light');
+  const systemLabel = t('mobileProfile.themeSystemLabel', 'System ({{mode}})', { mode: resolvedLabel });
   const activeToggleBg = theme.accentSoft ?? withAlpha(theme.primary, 0.18);
   const activeToggleBorder = withAlpha(theme.primary, 0.45);
 
@@ -244,9 +250,9 @@ export function UserMenuSheet({ open, onClose, user, isMember, navigate }: UserM
                 iconAfter={
                   <ToggleGroup
                     type="single"
-                    value={themeValue}
+                    value={selectedAppearance}
                     onValueChange={(next: string) => {
-                      if (next === 'light' || next === 'dark') {
+                      if (next === 'light' || next === 'dark' || next === 'system') {
                         updateAppearance(next);
                       }
                     }}
@@ -258,25 +264,24 @@ export function UserMenuSheet({ open, onClose, user, isMember, navigate }: UserM
                     {([
                       { key: 'light', label: t('mobileProfile.themeLight', 'Light'), icon: Sun },
                       { key: 'dark', label: t('mobileProfile.themeDark', 'Dark'), icon: Moon },
+                      { key: 'system', label: systemLabel, icon: Monitor },
                     ] as const).map((option) => {
-                      const active = option.key === themeValue;
+                      const active = option.key === selectedAppearance;
                       const Icon = option.icon;
                       return (
                         <ToggleGroup.Item
                           key={option.key}
                           value={option.key}
+                          aria-label={option.label}
                           borderRadius="$pill"
                           borderWidth={1}
                           borderColor={active ? activeToggleBorder : theme.border}
                           backgroundColor={active ? activeToggleBg : 'transparent'}
-                          paddingHorizontal="$2.5"
-                          paddingVertical="$1.5"
+                          paddingHorizontal="$2"
+                          paddingVertical="$1"
                         >
-                          <XStack alignItems="center" gap="$1.5">
-                            <Icon size={14} color={active ? theme.textStrong : theme.muted} />
-                            <Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? theme.textStrong : theme.muted}>
-                              {option.label}
-                            </Text>
+                          <XStack alignItems="center" justifyContent="center" minWidth={28} minHeight={24}>
+                            <Icon size={16} color={active ? theme.textStrong : theme.muted} />
                           </XStack>
                         </ToggleGroup.Item>
                       );
@@ -288,7 +293,7 @@ export function UserMenuSheet({ open, onClose, user, isMember, navigate }: UserM
           </YGroup>
           {appearance === 'system' ? (
             <Text fontSize="$xs" color={theme.muted}>
-              {t('mobileProfile.themeSystem', 'System')}
+              {t('mobileProfile.themeSystemHint', 'Following device setting: {{mode}}', { mode: resolvedLabel })}
             </Text>
           ) : null}
         </YStack>

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+const originalResizeObserver = globalThis.ResizeObserver;
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback?: string) => fallback ?? _key,
+  }),
+}));
+
+vi.mock('@tamagui/stacks', () => ({
+  YStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
+  XStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
+}));
+
+vi.mock('@tamagui/text', () => ({
+  SizableText: ({ children, ...props }: { children: React.ReactNode }) => <span {...props}>{children}</span>,
+}));
+
+vi.mock('@tamagui/react-native-web-lite', () => ({
+  Pressable: ({ children, onPress, ...props }: { children: React.ReactNode; onPress?: () => void }) => (
+    <button type="button" onClick={onPress} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock('../../theme', () => ({
+  useAdminTheme: () => ({
+    primary: '#FF5A5F',
+    muted: '#6b7280',
+    glassSurfaceStrong: 'rgba(255,255,255,0.9)',
+    surfaceMuted: '#f8fafc',
+    surface: '#ffffff',
+    glassBorder: 'rgba(229,231,235,0.7)',
+    border: '#e5e7eb',
+    glassShadow: 'rgba(15,23,42,0.14)',
+    shadow: 'rgba(0,0,0,0.12)',
+  }),
+}));
+
+vi.mock('../../../constants', () => ({
+  adminPath: (path: string) => path,
+}));
+
+import { BottomNav } from '../BottomNav';
+
+describe('BottomNav', () => {
+  beforeEach(() => {
+    HTMLElement.prototype.getBoundingClientRect = () =>
+      ({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 84,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 84,
+        toJSON: () => ({}),
+      }) as DOMRect;
+
+    (globalThis as unknown as { ResizeObserver: typeof ResizeObserver }).ResizeObserver = class {
+      private callback: () => void;
+
+      constructor(callback: () => void) {
+        this.callback = callback;
+      }
+
+      observe() {
+        this.callback();
+      }
+
+      disconnect() {}
+    };
+
+    document.documentElement.style.removeProperty('--admin-bottom-nav-offset');
+  });
+
+  afterEach(() => {
+    HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    document.documentElement.style.removeProperty('--admin-bottom-nav-offset');
+    if (originalResizeObserver) {
+      globalThis.ResizeObserver = originalResizeObserver;
+    } else {
+      delete (globalThis as unknown as { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;
+    }
+  });
+
+  it('sets the admin bottom nav offset CSS variable', async () => {
+    render(
+      <MemoryRouter initialEntries={['/mobile/profile']}>
+        <BottomNav active="profile" onNavigate={() => undefined} />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue('--admin-bottom-nav-offset')).toBe('84px');
+    });
+  });
+});