Fix display of toggle on mobile

lost-university · Jan 15, 2025 · 8ca1220 · 8ca1220
1 parent ad62365
commit 8ca1220
Showing 1 changed file with 23 additions and 21 deletions.
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -25,27 +25,29 @@
         />
       </button>
     </div>
-    <div class="flex w-full sm:w-auto px-2 sm:order-last">
-      <SwitchGroup class="pt-2 ml-auto">
-        <div class="flex items-center">
-          <SwitchLabel class="mr-4">
-            Validierung:
-          </SwitchLabel>
-          <HeadlessSwitch
-            :model-value="validationEnabled"
-            :class="validationEnabled ? 'bg-teal-700' : 'bg-gray-500'"
-            class="relative inline-flex h-9 w-16 sm:h-6 sm:w-11 items-center rounded-full"
-            @update:model-value="setValidationEnabled"
-          >
-            <span
-              aria-hidden="true"
-              :class="validationEnabled ? 'translate-x-9 sm:translate-x-6' : 'translate-x-1'"
-              class="inline-block h-6 w-6 sm:h-4 sm:w-4 transform rounded-full bg-white transition"
-            />
-          </HeadlessSwitch>
-        </div>
-      </SwitchGroup>
-      <GlobalValidationInfo />
+    <div class="flex w-full sm:w-1/3 sm:order-last relative mx-2 h-9 sm:h-auto">
+      <div class="flex w-full absolute top-0 right-0 z-40">
+        <SwitchGroup>
+          <div class="flex ml-auto items-start">
+            <SwitchLabel class="mr-4">
+              Validierung:
+            </SwitchLabel>
+            <HeadlessSwitch
+              :model-value="validationEnabled"
+              :class="validationEnabled ? 'bg-teal-700' : 'bg-gray-500'"
+              class="relative inline-flex h-9 w-16 sm:h-6 sm:w-11 items-center rounded-full"
+              @update:model-value="setValidationEnabled"
+            >
+              <span
+                aria-hidden="true"
+                :class="validationEnabled ? 'translate-x-9 sm:translate-x-6' : 'translate-x-1'"
+                class="inline-block h-6 w-6 sm:h-4 sm:w-4 transform rounded-full bg-white transition"
+              />
+            </HeadlessSwitch>
+          </div>
+        </SwitchGroup>
+        <GlobalValidationInfo />
+      </div>
     </div>
     <div
       class="w-full sm:inline-flex basis-full"