From f6ec6c0ad310ee78ebe7ef169dc4d7acb2d646cf Mon Sep 17 00:00:00 2001
From: Dirk <dirkdevbusiness@gmail.com>
Date: Fri, 4 Sep 2026 14:50:25 +0200
Subject: [PATCH] style: improve mobile responsiveness and visual consistency
 in modal dialogs

---
 app/src/components/common/LDialog.vue         | 57 ++++++++++---------
 app/src/components/form/LModal.vue            |  2 +-
 .../components/navigation/DesktopSidebar.vue  |  9 ++-
 app/src/components/navigation/ProfileMenu.vue |  9 ++-
 4 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/app/src/components/common/LDialog.vue b/app/src/components/common/LDialog.vue
index 13a9d385ac..dc0eeba65c 100644
--- a/app/src/components/common/LDialog.vue
+++ b/app/src/components/common/LDialog.vue
@@ -21,47 +21,48 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <LModal v-model:isVisible="open" :heading="title" @close="open = false">
+    <LModal
+        v-model:isVisible="open"
+        :heading="title"
+        @close="open = false"
+    >
         <template #default>
-            <div class="sm:flex sm:items-start">
+            <div class="flex items-start gap-3 sm:gap-4">
                 <div
-                    class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
+                    class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-red-100"
                     v-if="context === 'danger'"
                 >
-                    <ExclamationTriangleIcon class="h-6 w-6 text-red-600" aria-hidden="true" />
+                    <ExclamationTriangleIcon
+                        class="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                    />
                 </div>
-                <div
-                    :class="[
-                        'mt-3 text-center sm:mt-0 sm:text-left',
-                        { 'sm:ml-4': context !== 'default' },
-                    ]"
-                >
-                    <div class="mt-2" v-if="description">
-                        <p class="text-sm">
-                            {{ description }}
-                        </p>
-                    </div>
+                <div class="min-w-0 flex-1 text-left">
+                    <p
+                        class="text-sm"
+                        v-if="description"
+                    >
+                        {{ description }}
+                    </p>
                     <slot />
                 </div>
             </div>
         </template>
 
         <template #footer>
-            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                <span class="mb-3 block sm:mb-0 sm:ml-3">
-                    <LButton
-                        @click="primaryAction()"
-                        variant="primary"
-                        class="inline-flex w-full sm:w-auto"
-                        :context="context"
-                        data-test="modal-primary-button"
-                    >
-                        {{ primaryButtonText }}
-                    </LButton>
-                </span>
+            <div class="mt-5 flex flex-col gap-2 sm:mt-4 sm:flex-row-reverse sm:gap-3">
+                <LButton
+                    @click="primaryAction()"
+                    variant="primary"
+                    class="w-full sm:w-auto"
+                    :context="context"
+                    data-test="modal-primary-button"
+                >
+                    {{ primaryButtonText }}
+                </LButton>
                 <LButton
                     @click="secondaryAction()"
-                    class="inline-flex w-full sm:w-auto"
+                    class="w-full sm:w-auto"
                     v-if="secondaryAction && secondaryButtonText"
                     data-test="modal-secondary-button"
                 >
diff --git a/app/src/components/form/LModal.vue b/app/src/components/form/LModal.vue
index ea28d6e127..89f8fd09b2 100644
--- a/app/src/components/form/LModal.vue
+++ b/app/src/components/form/LModal.vue
@@ -20,7 +20,7 @@ const emit = defineEmits(["close"]);
         @close="emit('close')"
     >
         <div
-            class="max-h-screen w-full max-w-md overflow-y-auto rounded-lg"
+            class="max-h-full w-full max-w-md overflow-y-auto rounded-lg"
             :class="[
                 props.withBackground !== false
                     ? 'bg-white/90 p-5 shadow-xl dark:bg-slate-700/85'
diff --git a/app/src/components/navigation/DesktopSidebar.vue b/app/src/components/navigation/DesktopSidebar.vue
index d16a1ca650..75f2ad1708 100644
--- a/app/src/components/navigation/DesktopSidebar.vue
+++ b/app/src/components/navigation/DesktopSidebar.vue
@@ -452,17 +452,20 @@ const handleLogin = () => {
             :secondaryAction="() => (showLogoutDialog = false)"
             :secondaryButtonText="t('logout.modal.button_cancel')"
         >
-            <label class="mt-4 flex cursor-pointer items-start gap-3">
+            <label
+                class="mt-4 flex cursor-pointer items-start gap-3 rounded-lg bg-zinc-100/80 p-3 dark:bg-slate-800/40"
+            >
                 <LToggle
+                    class="mt-0.5"
                     :modelValue="forceReauthOnNextLogin"
                     @update:modelValue="(value: boolean) => (forceReauthOnNextLogin = value)"
                     data-test="shared-device-toggle"
                 />
-                <span class="text-sm">
+                <span class="text-sm leading-snug">
                     <span class="block font-medium text-zinc-900 dark:text-white">
                         {{ t("logout.modal.force_global_logout_label") }}
                     </span>
-                    <span class="mt-0.5 block text-zinc-500 dark:text-slate-300">
+                    <span class="mt-1 block text-xs text-zinc-500 dark:text-slate-300">
                         {{ t("logout.modal.force_global_logout_description") }}
                     </span>
                 </span>
diff --git a/app/src/components/navigation/ProfileMenu.vue b/app/src/components/navigation/ProfileMenu.vue
index a737fc6e39..f9adcf34d1 100644
--- a/app/src/components/navigation/ProfileMenu.vue
+++ b/app/src/components/navigation/ProfileMenu.vue
@@ -578,17 +578,20 @@ const sidebarNavigation = computed(() =>
             :secondaryAction="() => (showLogoutDialog = false)"
             :secondaryButtonText="t('logout.modal.button_cancel')"
         >
-            <label class="mt-4 flex cursor-pointer items-start gap-3">
+            <label
+                class="mt-4 flex cursor-pointer items-start gap-3 rounded-lg bg-zinc-100/80 p-3 dark:bg-slate-800/40"
+            >
                 <LToggle
+                    class="mt-0.5"
                     :modelValue="forceReauthOnNextLogin"
                     @update:modelValue="(value: boolean) => (forceReauthOnNextLogin = value)"
                     data-test="shared-device-toggle"
                 />
-                <span class="text-sm">
+                <span class="text-sm leading-snug">
                     <span class="block font-medium text-zinc-900 dark:text-white">
                         {{ t("logout.modal.force_global_logout_label") }}
                     </span>
-                    <span class="mt-0.5 block text-zinc-500 dark:text-slate-300">
+                    <span class="mt-1 block text-xs text-zinc-500 dark:text-slate-300">
                         {{ t("logout.modal.force_global_logout_description") }}
                     </span>
                 </span>