Completed the full mobile app polish pass: navigation feel, safe‑area consistency, input styling, list rows, FAB

patterns, skeleton loading, photo selection/bulk actions with shared‑element transitions, notification detail sheet,
  offline banner, maskable manifest icons, and route prefetching.

  Key changes

  - Navigation/shell: press feedback on all header actions, glassy sticky header and tab bar, safer bottom spacing
    (resources/js/admin/mobile/components/MobileShell.tsx, resources/js/admin/mobile/components/BottomNav.tsx).
  - Forms + lists: shared mobile form controls, list‑style rows in settings/profile, consistent inputs across core
    flows (resources/js/admin/mobile/components/FormControls.tsx, resources/js/admin/mobile/SettingsPage.tsx,
    resources/js/admin/mobile/ProfilePage.tsx, resources/js/admin/mobile/EventFormPage.tsx, resources/js/admin/mobile/
    EventMembersPage.tsx, resources/js/admin/mobile/EventTasksPage.tsx, resources/js/admin/mobile/
    EventGuestNotificationsPage.tsx, resources/js/admin/mobile/NotificationsPage.tsx, resources/js/admin/mobile/
    EventPhotosPage.tsx, resources/js/admin/mobile/EventsPage.tsx).
  - Media workflows: shared‑element photo transitions, selection mode + bulk actions bar (resources/js/admin/mobile/
    EventPhotosPage.tsx).
  - Loading UX: shimmering skeletons (resources/css/app.css, resources/js/admin/mobile/components/Primitives.tsx).
  - PWA polish + perf: maskable icons, offline banner hook, and route prefetch (public/manifest.json, resources/js/
    admin/mobile/hooks/useOnlineStatus.tsx, resources/js/admin/mobile/prefetch.ts, resources/js/admin/main.tsx).

resources/js/admin/mobile/EventFormPage.tsx

@@ -7,6 +7,7 @@ import { SizableText as Text } from '@tamagui/text';
 import { Switch } from '@tamagui/switch';
 import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton } from './components/Primitives';
+import { MobileField, MobileInput, MobileSelect, MobileTextArea } from './components/FormControls';
 import { LegalConsentSheet } from './components/LegalConsentSheet';
 import { createEvent, getEvent, updateEvent, getEventTypes, TenantEvent, TenantEventType } from '../api';
 import { resolveEventSlugAfterUpdate } from './eventFormNavigation';
@@ -206,38 +207,36 @@ export default function MobileEventFormPage() {
       ) : null}
 
       <MobileCard space="$3">
-        <Field label={t('eventForm.fields.name.label', 'Event name')}>
-          <input
+        <MobileField label={t('eventForm.fields.name.label', 'Event name')}>
+          <MobileInput
             type="text"
             value={form.name}
             onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
             placeholder={t('eventForm.fields.name.placeholder', 'e.g. Summer Party 2025')}
-            style={inputStyle}
           />
-        </Field>
+        </MobileField>
 
-        <Field label={t('eventForm.fields.date.label', 'Date & time')}>
+        <MobileField label={t('eventForm.fields.date.label', 'Date & time')}>
           <XStack alignItems="center" space="$2">
-            <input
+            <MobileInput
               type="datetime-local"
               value={form.date}
               onChange={(e) => setForm((prev) => ({ ...prev, date: e.target.value }))}
-              style={{ ...inputStyle, flex: 1 }}
+              style={{ flex: 1 }}
             />
             <CalendarDays size={16} color="#9ca3af" />
           </XStack>
-        </Field>
+        </MobileField>
 
-        <Field label={t('eventForm.fields.type.label', 'Event type')}>
+        <MobileField label={t('eventForm.fields.type.label', 'Event type')}>
           {typesLoading ? (
             <Text fontSize="$sm" color="#6b7280">{t('eventForm.fields.type.loading', 'Loading event types…')}</Text>
           ) : eventTypes.length === 0 ? (
             <Text fontSize="$sm" color="#6b7280">{t('eventForm.fields.type.empty', 'No event types available yet. Please add one in the admin area.')}</Text>
           ) : (
-            <select
+            <MobileSelect
               value={form.eventTypeId ?? ''}
               onChange={(e) => setForm((prev) => ({ ...prev, eventTypeId: Number(e.target.value) }))}
-              style={{ ...inputStyle, height: 44 }}
             >
               <option value="">{t('eventForm.fields.type.placeholder', 'Select event type')}</option>
               {eventTypes.map((type) => (
@@ -245,33 +244,32 @@ export default function MobileEventFormPage() {
                   {renderName(type.name as any) || type.slug}
                 </option>
               ))}
-            </select>
+            </MobileSelect>
           )}
-        </Field>
+        </MobileField>
 
-        <Field label={t('eventForm.fields.description.label', 'Optional details')}>
-          <textarea
+        <MobileField label={t('eventForm.fields.description.label', 'Optional details')}>
+          <MobileTextArea
             value={form.description}
             onChange={(e) => setForm((prev) => ({ ...prev, description: e.target.value }))}
             placeholder={t('eventForm.fields.description.placeholder', 'Description')}
-            style={{ ...inputStyle, minHeight: 96 }}
           />
-        </Field>
+        </MobileField>
 
-        <Field label={t('eventForm.fields.location.label', 'Location')}>
+        <MobileField label={t('eventForm.fields.location.label', 'Location')}>
           <XStack alignItems="center" space="$2">
-            <input
+            <MobileInput
               type="text"
               value={form.location}
               onChange={(e) => setForm((prev) => ({ ...prev, location: e.target.value }))}
               placeholder={t('eventForm.fields.location.placeholder', 'Location')}
-              style={{ ...inputStyle, flex: 1 }}
+              style={{ flex: 1 }}
             />
             <MapPin size={16} color="#9ca3af" />
           </XStack>
-        </Field>
+        </MobileField>
 
-        <Field label={t('eventForm.fields.publish.label', 'Publish immediately')}>
+        <MobileField label={t('eventForm.fields.publish.label', 'Publish immediately')}>
           <XStack alignItems="center" space="$2">
             <Switch
               checked={form.published}
@@ -288,9 +286,9 @@ export default function MobileEventFormPage() {
             </Text>
           </XStack>
           <Text fontSize="$xs" color="#6b7280">{t('eventForm.fields.publish.help', 'Enable if guests should see the event right away. You can change the status later.')}</Text>
-        </Field>
+        </MobileField>
 
-        <Field label={t('eventForm.fields.tasksMode.label', 'Tasks & challenges')}>
+        <MobileField label={t('eventForm.fields.tasksMode.label', 'Tasks & challenges')}>
           <XStack alignItems="center" space="$2">
             <Switch
               checked={form.tasksEnabled}
@@ -319,9 +317,9 @@ export default function MobileEventFormPage() {
                   'Task mode is off: guests only see the photo feed.',
                 )}
           </Text>
-        </Field>
+        </MobileField>
 
-        <Field label={t('eventForm.fields.uploadVisibility.label', 'Uploads visible immediately')}>
+        <MobileField label={t('eventForm.fields.uploadVisibility.label', 'Uploads visible immediately')}>
           <XStack alignItems="center" space="$2">
             <Switch
               checked={form.autoApproveUploads}
@@ -350,7 +348,7 @@ export default function MobileEventFormPage() {
                   'Uploads werden zunächst geprüft und erscheinen nach Freigabe.',
                 )}
           </Text>
-        </Field>
+        </MobileField>
       </MobileCard>
 
       <YStack space="$2">
@@ -416,27 +414,6 @@ export default function MobileEventFormPage() {
   );
 }
 
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <YStack space="$1.5">
-      <Text fontSize="$sm" fontWeight="800" color="#111827">
-        {label}
-      </Text>
-      {children}
-    </YStack>
-  );
-}
-
-const inputStyle: React.CSSProperties = {
-  width: '100%',
-  height: 44,
-  borderRadius: 10,
-  border: '1px solid #e5e7eb',
-  padding: '0 12px',
-  fontSize: 14,
-  background: 'white',
-};
-
 function renderName(name: TenantEvent['name']): string {
   if (typeof name === 'string') return name;
   if (name && typeof name === 'object') {