From ef88342bd0ff6034abd9b8f361814d8a753e64fd Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Thu, 22 Jan 2026 21:10:21 +0100
Subject: [PATCH] Polish tasks hero and dialog

---
 .../js/admin/i18n/locales/de/management.json  |  4 +
 .../js/admin/i18n/locales/en/management.json  |  4 +
 resources/js/admin/mobile/EventTasksPage.tsx  | 85 ++++++++++---------
 3 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/resources/js/admin/i18n/locales/de/management.json b/resources/js/admin/i18n/locales/de/management.json
index a464cc7..01780bc 100644
--- a/resources/js/admin/i18n/locales/de/management.json
+++ b/resources/js/admin/i18n/locales/de/management.json
@@ -581,6 +581,10 @@
       "limitSkipped": "{{count}} Fotoaufgaben wegen Limit übersprungen.",
       "created": "Fotoaufgabe gespeichert",
       "removed": "Fotoaufgabe entfernt",
+      "remove": "Entfernen",
+      "removeTitle": "Fotoaufgabe entfernen?",
+      "removeBody": "\"{{title}}\" wird aus dem Event entfernt.",
+      "removeBodyFallback": "Die Fotoaufgabe wird aus dem Event entfernt.",
       "imported": "Fotoaufgabenpaket importiert",
       "saveTask": "Fotoaufgabe speichern",
       "add": "Hinzufügen",
diff --git a/resources/js/admin/i18n/locales/en/management.json b/resources/js/admin/i18n/locales/en/management.json
index 87a3cfa..e6af6e3 100644
--- a/resources/js/admin/i18n/locales/en/management.json
+++ b/resources/js/admin/i18n/locales/en/management.json
@@ -577,6 +577,10 @@
       "limitSkipped": "Skipped {{count}} tasks due to limit.",
       "created": "Photo task saved",
       "removed": "Photo task removed",
+      "remove": "Remove",
+      "removeTitle": "Remove photo task?",
+      "removeBody": "This will remove \"{{title}}\" from the event.",
+      "removeBodyFallback": "This will remove the photo task from the event.",
       "imported": "Photo task pack imported",
       "saveTask": "Save photo task",
       "add": "Add",
diff --git a/resources/js/admin/mobile/EventTasksPage.tsx b/resources/js/admin/mobile/EventTasksPage.tsx
index ce7597d..7404f91 100644
--- a/resources/js/admin/mobile/EventTasksPage.tsx
+++ b/resources/js/admin/mobile/EventTasksPage.tsx
@@ -1083,53 +1083,60 @@ export default function MobileEventTasksPage() {
             >
               <YStack space="$2">
                 <XStack alignItems="center" justifyContent="space-between" space="$2">
-                  <YStack space="$1" flex={1}>
-                    <Text fontSize="$sm" fontWeight="800" color={text}>
-                      {t('events.tasks.toggle.title', 'Photo task mode')}
-                    </Text>
-                  </YStack>
+                  <Text fontSize="$xs" fontWeight="700" color={text}>
+                    {t('events.tasks.toggle.title', 'Photo task mode')}
+                  </Text>
+                  <Pressable
+                    onPress={() => setShowTaskDetails((prev) => !prev)}
+                    aria-label={t(
+                      'events.tasks.toggle.description',
+                      'Control whether guests see mission cards and prompts.'
+                    )}
+                  >
+                    <XStack
+                      width={30}
+                      height={30}
+                      borderRadius={10}
+                      alignItems="center"
+                      justifyContent="center"
+                      borderWidth={1}
+                      borderColor={showTaskDetails ? withAlpha(primary, 0.45) : border}
+                      backgroundColor={showTaskDetails ? withAlpha(primary, 0.12) : surface}
+                    >
+                      <Info size={14} color={showTaskDetails ? primary : muted} />
+                    </XStack>
+                  </Pressable>
+                </XStack>
+                <XStack
+                  alignItems="center"
+                  justifyContent="space-between"
+                  paddingHorizontal="$2.5"
+                  paddingVertical="$2"
+                  borderRadius={14}
+                  borderWidth={1}
+                  borderColor={border}
+                  backgroundColor={surface}
+                >
+                  <Text fontSize="$xs" fontWeight="700" color={text}>
+                    {t('events.tasks.toggle.switchLabel', 'Photo tasks for guests')}
+                  </Text>
                   <XStack alignItems="center" space="$2">
+                    <Switch
+                      size="$4"
+                      checked={tasksEnabled}
+                      onCheckedChange={handleTasksToggle}
+                      aria-label={t('events.tasks.toggle.switchLabel', 'Photo tasks for guests')}
+                      disabled={!canManageTasks || tasksToggleBusy}
+                    >
+                      <Switch.Thumb />
+                    </Switch>
                     <PillBadge tone={tasksEnabled ? 'success' : 'warning'}>
                       {tasksEnabled
                         ? t('events.tasks.toggle.active', 'ACTIVE')
                         : t('events.tasks.toggle.inactive', 'INACTIVE')}
                     </PillBadge>
-                    <Pressable
-                      onPress={() => setShowTaskDetails((prev) => !prev)}
-                      aria-label={t(
-                        'events.tasks.toggle.description',
-                        'Control whether guests see mission cards and prompts.'
-                      )}
-                    >
-                      <XStack
-                        width={30}
-                        height={30}
-                        borderRadius={10}
-                        alignItems="center"
-                        justifyContent="center"
-                        borderWidth={1}
-                        borderColor={showTaskDetails ? withAlpha(primary, 0.45) : border}
-                        backgroundColor={showTaskDetails ? withAlpha(primary, 0.12) : surface}
-                      >
-                        <Info size={14} color={showTaskDetails ? primary : muted} />
-                      </XStack>
-                    </Pressable>
                   </XStack>
                 </XStack>
-                <XStack alignItems="center" justifyContent="space-between" space="$2">
-                  <Text fontSize="$sm" fontWeight="700" color={text}>
-                    {t('events.tasks.toggle.switchLabel', 'Photo tasks for guests')}
-                  </Text>
-                  <Switch
-                    size="$4"
-                    checked={tasksEnabled}
-                    onCheckedChange={handleTasksToggle}
-                    aria-label={t('events.tasks.toggle.switchLabel', 'Photo tasks for guests')}
-                    disabled={!canManageTasks || tasksToggleBusy}
-                  >
-                    <Switch.Thumb />
-                  </Switch>
-                </XStack>
                 <Text fontSize="$xs" color={muted}>
                   {tasksEnabled
                     ? t('events.tasks.toggle.onLabel', 'Mission cards active')