From 066831203cd39481aa021204bfbce9ec45080e89 Mon Sep 17 00:00:00 2001
From: Alexander Trost <galexrt@googlemail.com>
Date: Fri, 11 Oct 2024 14:56:40 +0200
Subject: [PATCH] fix: slightly reorganize user settings order

Signed-off-by: Alexander Trost <galexrt@googlemail.com>
---
 .../auth/account/UserSettingsPanel.vue        | 34 +++++++++++--------
 .../penaltycalculator/PenaltyCalculator.vue   |  2 ++
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/components/auth/account/UserSettingsPanel.vue b/app/components/auth/account/UserSettingsPanel.vue
index 7528393e4..c75c9c501 100644
--- a/app/components/auth/account/UserSettingsPanel.vue
+++ b/app/components/auth/account/UserSettingsPanel.vue
@@ -77,14 +77,29 @@ watch(design.value, () => {
                 <ColorPickerTW v-model="design.ui.gray" name="grayColor" />
             </UFormGroup>
 
+            <UFormGroup
+                name="streamerMode"
+                :label="$t('components.auth.UserSettingsPanel.streamer_mode.title')"
+                :description="$t('components.auth.UserSettingsPanel.streamer_mode.description')"
+                class="grid grid-cols-2 items-center gap-2"
+            >
+                <UToggle v-model="streamerMode" name="streamerMode">
+                    <span class="sr-only">{{ $t('components.auth.UserSettingsPanel.streamer_mode.title') }}</span>
+                </UToggle>
+            </UFormGroup>
+
             <UFormGroup
                 name="darkModeActive"
                 :label="$t('components.auth.UserSettingsPanel.editor_theme.title')"
                 class="grid grid-cols-2 items-center gap-2"
             >
-                <UToggle v-model="darkModeActive">
-                    <span class="sr-only">{{ $t('components.auth.UserSettingsPanel.editor_theme.title') }}</span>
-                </UToggle>
+                <div class="flex items-center gap-2">
+                    <UToggle v-model="darkModeActive">
+                        <span class="sr-only">{{ $t('components.auth.UserSettingsPanel.editor_theme.title') }}</span>
+                    </UToggle>
+
+                    <span>{{ $t('components.auth.UserSettingsPanel.editor_theme.dark_mode') }}</span>
+                </div>
             </UFormGroup>
 
             <UFormGroup
@@ -92,7 +107,7 @@ watch(design.value, () => {
                 :label="$t('components.auth.UserSettingsPanel.documents_lists_style.title')"
                 class="grid grid-cols-2 items-center gap-2"
             >
-                <div class="inline-flex items-center gap-2">
+                <div class="inline-flex items-center gap-2 text-sm">
                     <span>{{ $t('components.auth.UserSettingsPanel.documents_lists_style.single') }}</span>
                     <UToggle v-model="designDocumentsListStyle">
                         <span class="sr-only">{{ $t('components.auth.UserSettingsPanel.documents_lists_style.title') }}</span>
@@ -101,17 +116,6 @@ watch(design.value, () => {
                 </div>
             </UFormGroup>
 
-            <UFormGroup
-                name="streamerMode"
-                :label="$t('components.auth.UserSettingsPanel.streamer_mode.title')"
-                :description="$t('components.auth.UserSettingsPanel.streamer_mode.description')"
-                class="grid grid-cols-2 items-center gap-2"
-            >
-                <UToggle v-model="streamerMode" name="streamerMode">
-                    <span class="sr-only">{{ $t('components.auth.UserSettingsPanel.streamer_mode.title') }}</span>
-                </UToggle>
-            </UFormGroup>
-
             <UFormGroup
                 name="selectedHomepage"
                 :label="$t('components.auth.UserSettingsPanel.set_startpage.title')"
diff --git a/app/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue b/app/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue
index 77762e34e..3a6f019f1 100644
--- a/app/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue
+++ b/app/components/quickbuttons/penaltycalculator/PenaltyCalculator.vue
@@ -241,6 +241,7 @@ const columns = [
                                                 {{ law.name }}
                                             </p>
                                         </template>
+
                                         <template #description-data="{ row: law }">
                                             <p
                                                 class="line-clamp-2 w-full max-w-sm whitespace-normal break-all hover:line-clamp-none"
@@ -248,6 +249,7 @@ const columns = [
                                                 {{ law.description }}
                                             </p>
                                         </template>
+
                                         <template #count-data="{ row: law }">
                                             <USelect
                                                 name="count"