From fbe38eede95813e163a390b693790d78ce75c215 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sat, 29 Mar 2025 01:34:46 +0100
Subject: [PATCH] feat: modal improvements

---
 src/components/cards/AddCardBulkModal.svelte  | 12 +++++-----
 src/components/cards/AddCardModal.svelte      | 12 +++++-----
 src/components/cards/CardDetailModal.svelte   | 12 +++++-----
 src/components/cards/DeleteCardModal.svelte   | 12 +++++-----
 .../contacts/AddContactModal.svelte           | 14 ++++++------
 .../donations/AddDonationModal.svelte         | 14 ++++++------
 .../donations/AddDonationPaymentModal.svelte  | 12 +++++-----
 .../donations/DeleteDonationModal.svelte      | 12 +++++-----
 src/components/donors/AddDonorModal.svelte    | 12 +++++-----
 .../donors/ConfirmDonorDeletion.svelte        | 12 +++++-----
 src/components/general/About.svelte           |  6 ++---
 src/components/groups/AddGroupModal.svelte    | 12 +++++-----
 src/components/orgs/AddOrgModal.svelte        | 12 +++++-----
 .../orgs/ConfirmOrgDeletionModal.svelte       | 12 +++++-----
 src/components/runners/AddRunnerModal.svelte  | 12 +++++-----
 .../runners/DeleteRunnerModal.svelte          | 12 +++++-----
 .../runners/ImportRunnerModal.svelte          | 16 +++++++-------
 src/components/scans/AddScanModal.svelte      | 12 +++++-----
 src/components/scans/DeleteScanModal.svelte   | 12 +++++-----
 .../scanstations/AddScanStationModal.svelte   | 12 +++++-----
 .../ConfirmScanStationDeletion.svelte         | 12 +++++-----
 .../CopyScanStationTokenModal.svelte          | 10 ++++-----
 .../settings/ConfirmProfileDeletion.svelte    | 12 +++++-----
 src/components/settings/Settings.svelte       |  4 ++--
 .../statsclients/AddStatsClientModal.svelte   | 12 +++++-----
 .../ConfirmStatsClientDeletion.svelte         | 12 +++++-----
 .../CopyStatsClientTokenModal.svelte          | 10 ++++-----
 src/components/teams/AddTeamModal.svelte      | 12 +++++-----
 .../teams/ConfirmTeamDeletionModal.svelte     | 12 +++++-----
 src/components/tracks/AddTrackModal.svelte    | 12 +++++-----
 src/components/users/AddUserModal.svelte      | 12 +++++-----
 src/locales/de.json                           | 22 +++++++++----------
 32 files changed, 192 insertions(+), 192 deletions(-)

diff --git a/src/components/cards/AddCardBulkModal.svelte b/src/components/cards/AddCardBulkModal.svelte
index 09f544ac..c90def46 100644
--- a/src/components/cards/AddCardBulkModal.svelte
+++ b/src/components/cards/AddCardBulkModal.svelte
@@ -91,7 +91,7 @@
 
 {#if bulk_modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       bulk_modal_open = false;
@@ -117,7 +117,7 @@
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w- rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -135,7 +135,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:mt-0 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-bulk-blanco-cards")}
               </h3>
@@ -189,7 +189,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit_with_print}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create-and-generate-pdf")}
           </button>
@@ -198,7 +198,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit_without_print}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create-without-pdf")}
           </button>
@@ -207,7 +207,7 @@
               bulk_modal_open = false;
             }}
             type="button"
-            class="mr-auto w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:text-sm"
+            class="mr-auto w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/cards/AddCardModal.svelte b/src/components/cards/AddCardModal.svelte
index dd324d4e..42020ef0 100644
--- a/src/components/cards/AddCardModal.svelte
+++ b/src/components/cards/AddCardModal.svelte
@@ -84,7 +84,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -104,13 +104,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -128,7 +128,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:mt-0 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-card")}
               </h3>
@@ -171,7 +171,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -180,7 +180,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/cards/CardDetailModal.svelte b/src/components/cards/CardDetailModal.svelte
index 620a2b4d..f16e8ad5 100644
--- a/src/components/cards/CardDetailModal.svelte
+++ b/src/components/cards/CardDetailModal.svelte
@@ -78,7 +78,7 @@
 
 {#if edit_modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       edit_modal_open = false;
@@ -98,13 +98,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -122,7 +122,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("edit-a-card")}
               </h3>
@@ -180,7 +180,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("save-changes")}
           </button>
@@ -189,7 +189,7 @@
               edit_modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/cards/DeleteCardModal.svelte b/src/components/cards/DeleteCardModal.svelte
index e45d0b22..05ccfc5b 100644
--- a/src/components/cards/DeleteCardModal.svelte
+++ b/src/components/cards/DeleteCardModal.svelte
@@ -34,7 +34,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -54,13 +54,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -78,7 +78,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("please-confirm-the-deletion-of-card")}
               </h3>
@@ -103,7 +103,7 @@
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("delete")}
           </button>
@@ -112,7 +112,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/contacts/AddContactModal.svelte b/src/components/contacts/AddContactModal.svelte
index 36d5dfaa..24028d63 100644
--- a/src/components/contacts/AddContactModal.svelte
+++ b/src/components/contacts/AddContactModal.svelte
@@ -43,7 +43,7 @@
   $: address_zipcode_value = "";
   $: address_city_value = "";
   $: processed_last_submit = true;
-  $: address_checked = true;
+  $: address_checked = false;
   $: isPhoneValidOrEmpty =
     (phone_input_value.includes("+") &&
       isMobilePhone(
@@ -136,7 +136,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -156,13 +156,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -179,7 +179,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-contact")}
               </h3>
@@ -460,7 +460,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -469,7 +469,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/donations/AddDonationModal.svelte b/src/components/donations/AddDonationModal.svelte
index d2571524..63fcd19a 100644
--- a/src/components/donations/AddDonationModal.svelte
+++ b/src/components/donations/AddDonationModal.svelte
@@ -115,7 +115,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -135,13 +135,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -158,14 +158,14 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {#if is_fixed}
                   {$_("create-a-new-fixed-donation")}
                 {:else}{$_("create-a-new-distance-donation")}{/if}
               </h3>
               <label class="content-center align-middle object-center">
-                <span class="ml-2 text-base" class:text-gray-300={is_fixed}
+                <span class="text-base" class:text-gray-300={is_fixed}
                   >{$_("distance-donation")}</span
                 >
                 <input
@@ -295,7 +295,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -304,7 +304,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/donations/AddDonationPaymentModal.svelte b/src/components/donations/AddDonationPaymentModal.svelte
index 80ccb71d..b3b65dfd 100644
--- a/src/components/donations/AddDonationPaymentModal.svelte
+++ b/src/components/donations/AddDonationPaymentModal.svelte
@@ -76,7 +76,7 @@
 
 {#if payment_modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       payment_modal_open = false;
@@ -96,13 +96,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -120,7 +120,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("enter-payment")}
               </h3>
@@ -185,7 +185,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("save-changes")}
           </button>
@@ -194,7 +194,7 @@
               payment_modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/donations/DeleteDonationModal.svelte b/src/components/donations/DeleteDonationModal.svelte
index 801d5aaf..282d0850 100644
--- a/src/components/donations/DeleteDonationModal.svelte
+++ b/src/components/donations/DeleteDonationModal.svelte
@@ -37,7 +37,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -57,13 +57,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -80,7 +80,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("please-confirm-the-deletion-of-donation")}
               </h3>
@@ -97,7 +97,7 @@
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("delete")}
           </button>
@@ -106,7 +106,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/donors/AddDonorModal.svelte b/src/components/donors/AddDonorModal.svelte
index ca254d4d..230fada8 100644
--- a/src/components/donors/AddDonorModal.svelte
+++ b/src/components/donors/AddDonorModal.svelte
@@ -124,7 +124,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -144,13 +144,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -167,7 +167,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-donor")}
               </h3>
@@ -424,7 +424,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -433,7 +433,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/donors/ConfirmDonorDeletion.svelte b/src/components/donors/ConfirmDonorDeletion.svelte
index 29e4d5c4..f4bb0e47 100644
--- a/src/components/donors/ConfirmDonorDeletion.svelte
+++ b/src/components/donors/ConfirmDonorDeletion.svelte
@@ -16,7 +16,7 @@
 
 {#if modal_open}
 	<div
-		class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={cancelDelete}
 	>
@@ -34,13 +34,13 @@
 				aria-hidden="true">&#8203;</span
 			>
 			<div
-				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
 				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-					<div class="sm:flex sm:items-start">
+					<div class="">
 						<div
 							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
@@ -54,7 +54,7 @@
 								/></svg
 							>
 						</div>
-						<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+						<div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
 							<h3 class="text-lg leading-6 font-medium text-gray-900">
 								{$_(
 									"do-you-want-to-delete-this-donor-with-all-related-donations"
@@ -72,14 +72,14 @@
 					<button
 						on:click={deleteDonor}
 						type="button"
-						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
 					>
 						{$_("confirm-delete-donor-with-all-donations")}
 					</button>
 					<button
 						on:click={cancelDelete}
 						type="button"
-						class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
 					>
 						{$_("cancel-keep-donor")}
 					</button>
diff --git a/src/components/general/About.svelte b/src/components/general/About.svelte
index 05587b0f..62457f62 100644
--- a/src/components/general/About.svelte
+++ b/src/components/general/About.svelte
@@ -24,7 +24,7 @@
 
 {#if modal_open}
 	<div
-		class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={() => {
 			modal_open = false;
@@ -44,13 +44,13 @@
 				aria-hidden="true">&#8203;</span
 			>
 			<div
-				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
 				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-					<div class="sm:flex sm:items-start">
+					<div class="">
 						<div
 							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
diff --git a/src/components/groups/AddGroupModal.svelte b/src/components/groups/AddGroupModal.svelte
index 813f0b75..860e8c59 100644
--- a/src/components/groups/AddGroupModal.svelte
+++ b/src/components/groups/AddGroupModal.svelte
@@ -59,7 +59,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -79,13 +79,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -102,7 +102,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-user-group")}
               </h3>
@@ -165,7 +165,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -174,7 +174,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/orgs/AddOrgModal.svelte b/src/components/orgs/AddOrgModal.svelte
index 2fe88906..ffffb9e4 100644
--- a/src/components/orgs/AddOrgModal.svelte
+++ b/src/components/orgs/AddOrgModal.svelte
@@ -82,7 +82,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -102,13 +102,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -124,7 +124,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-organization")}
               </h3>
@@ -285,7 +285,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -294,7 +294,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/orgs/ConfirmOrgDeletionModal.svelte b/src/components/orgs/ConfirmOrgDeletionModal.svelte
index 12aee977..3742ea3f 100644
--- a/src/components/orgs/ConfirmOrgDeletionModal.svelte
+++ b/src/components/orgs/ConfirmOrgDeletionModal.svelte
@@ -27,7 +27,7 @@
 
 {#if modal_open}
 	<div
-		class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={cancelDelete}
 	>
@@ -45,13 +45,13 @@
 				aria-hidden="true">&#8203;</span
 			>
 			<div
-				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
 				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-					<div class="sm:flex sm:items-start">
+					<div class="">
 						<div
 							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
@@ -68,7 +68,7 @@
 								/></svg
 							>
 						</div>
-						<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+						<div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
 							<h3 class="text-lg leading-6 font-medium text-gray-900">
 								{$_("do-you-want-to-delete-the-organization-delete_org-name", {
 									values: { orgname: delete_org.name },
@@ -86,14 +86,14 @@
 					<button
 						on:click={deleteOrg}
 						type="button"
-						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
 					>
 						{$_("confirm-delete-organization-and-associated-teams-runners")}
 					</button>
 					<button
 						on:click={cancelDelete}
 						type="button"
-						class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
 					>
 						{$_("cancel-keep-organization")}
 					</button>
diff --git a/src/components/runners/AddRunnerModal.svelte b/src/components/runners/AddRunnerModal.svelte
index 6320953c..4d6f1027 100644
--- a/src/components/runners/AddRunnerModal.svelte
+++ b/src/components/runners/AddRunnerModal.svelte
@@ -117,7 +117,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -137,13 +137,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -160,7 +160,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-runner")}
               </h3>
@@ -329,7 +329,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -338,7 +338,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/runners/DeleteRunnerModal.svelte b/src/components/runners/DeleteRunnerModal.svelte
index e3fc9c6c..cb388a89 100644
--- a/src/components/runners/DeleteRunnerModal.svelte
+++ b/src/components/runners/DeleteRunnerModal.svelte
@@ -31,7 +31,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -51,13 +51,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -74,7 +74,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_('delete_runner')}
               </h3>
@@ -90,7 +90,7 @@
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("delete")}
           </button>
@@ -99,7 +99,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/runners/ImportRunnerModal.svelte b/src/components/runners/ImportRunnerModal.svelte
index 4736ea49..e22113f1 100644
--- a/src/components/runners/ImportRunnerModal.svelte
+++ b/src/components/runners/ImportRunnerModal.svelte
@@ -187,7 +187,7 @@
 
 {#if import_modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       cancelModal();
@@ -207,13 +207,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl lg:rounded-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -230,13 +230,13 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
+            <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
               <h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
                 {$_("runner-import")}
               </h3>
             </div>
           </div>
-          <div class="mt-5 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
+          <div class="mt-5 text-center sm:mt-0 sm:text-left w-full">
             {#if json_output.length === 0}
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
@@ -256,7 +256,7 @@
                     cancelModal();
                   }}
                   type="button"
-                  class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-40 mr-0 sm:ml-0 sm:w-auto sm:text-sm"
+                  class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
                 >
                   {$_("cancel")}
                 </button>
@@ -378,7 +378,7 @@
                   class:opacity-50={!importButtonEnabled}
                   on:click={importAction}
                   type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                 >
                   {$_("import-runners")}
                 </button>
@@ -387,7 +387,7 @@
                     cancelModal();
                   }}
                   type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                 >
                   {$_("cancel")}
                 </button>
diff --git a/src/components/scans/AddScanModal.svelte b/src/components/scans/AddScanModal.svelte
index 25392b79..d978d17e 100644
--- a/src/components/scans/AddScanModal.svelte
+++ b/src/components/scans/AddScanModal.svelte
@@ -68,7 +68,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -88,13 +88,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -112,7 +112,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-scan-fixed-only")}
               </h3>
@@ -186,7 +186,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -195,7 +195,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/scans/DeleteScanModal.svelte b/src/components/scans/DeleteScanModal.svelte
index 29d39d4e..e9c27651 100644
--- a/src/components/scans/DeleteScanModal.svelte
+++ b/src/components/scans/DeleteScanModal.svelte
@@ -33,7 +33,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -53,13 +53,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -76,7 +76,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("please-confirm-the-deletion-of-scan")}
               </h3>
@@ -90,7 +90,7 @@
           <button
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("delete")}
           </button>
@@ -99,7 +99,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/scanstations/AddScanStationModal.svelte b/src/components/scanstations/AddScanStationModal.svelte
index eac60f25..befc2e3c 100644
--- a/src/components/scanstations/AddScanStationModal.svelte
+++ b/src/components/scanstations/AddScanStationModal.svelte
@@ -72,7 +72,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -92,13 +92,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -115,7 +115,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:mt-0 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-scanstation")}
               </h3>
@@ -194,7 +194,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -203,7 +203,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/scanstations/ConfirmScanStationDeletion.svelte b/src/components/scanstations/ConfirmScanStationDeletion.svelte
index 044ee743..ade3959d 100644
--- a/src/components/scanstations/ConfirmScanStationDeletion.svelte
+++ b/src/components/scanstations/ConfirmScanStationDeletion.svelte
@@ -24,7 +24,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={cancelDelete}
   >
@@ -42,13 +42,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -62,7 +62,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("attention")}
               </h3>
@@ -82,14 +82,14 @@
           <button
             on:click={deleteStation}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("confirm-delete-station-with-all-scans")}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel-keep-station")}
           </button>
diff --git a/src/components/scanstations/CopyScanStationTokenModal.svelte b/src/components/scanstations/CopyScanStationTokenModal.svelte
index c946c18f..380b05aa 100644
--- a/src/components/scanstations/CopyScanStationTokenModal.svelte
+++ b/src/components/scanstations/CopyScanStationTokenModal.svelte
@@ -60,7 +60,7 @@
 	{#if valueCopy != null}
 		<textarea bind:this={areaDom}>{valueCopy}</textarea>
 	{/if}
-	<div class="fixed z-10 inset-0 overflow-y-auto">
+	<div class="fixed z-10 inset-0 overflow-y-hidden">
 		<div
 			class="flex items-end justify-center min-h-screen text-center sm:block p-0 lg:p-4"
 		>
@@ -75,13 +75,13 @@
 				aria-hidden="true">&#8203;</span
 			>
 			<div
-				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
 				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-					<div class="sm:flex sm:items-start">
+					<div class="">
 						<div
 							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
@@ -96,7 +96,7 @@
 								/></svg
 							>
 						</div>
-						<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+						<div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
 							<h3 class="text-lg leading-6 font-medium text-gray-900">
 								{$_("token")}
 							</h3>
@@ -188,7 +188,7 @@
 					<button
 						on:click={close}
 						type="button"
-						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
 					>
 						{$_("yes-i-copied-the-token")}
 					</button>
diff --git a/src/components/settings/ConfirmProfileDeletion.svelte b/src/components/settings/ConfirmProfileDeletion.svelte
index c44d34ca..dcda7a65 100644
--- a/src/components/settings/ConfirmProfileDeletion.svelte
+++ b/src/components/settings/ConfirmProfileDeletion.svelte
@@ -25,7 +25,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={cancelDelete}
   >
@@ -43,13 +43,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -63,7 +63,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("attention")}
               </h3>
@@ -85,14 +85,14 @@
           <button
             on:click={deleteMe}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("confirm-delete-my-user-profile")}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel-keep-my-profile")}
           </button>
diff --git a/src/components/settings/Settings.svelte b/src/components/settings/Settings.svelte
index 507e12c5..5520b88a 100644
--- a/src/components/settings/Settings.svelte
+++ b/src/components/settings/Settings.svelte
@@ -268,7 +268,7 @@
                       on:click={() => {
                         modal_open = true;
                       }}
-                      class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+                      class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                       >{$_("confirm-deletion")}</button
                     >
                     <button
@@ -285,7 +285,7 @@
                         delete_triggered = true;
                       }}
                       type="button"
-                      class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+                      class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                       >{$_("delete-profile")}</button
                     >
                   {/if}
diff --git a/src/components/statsclients/AddStatsClientModal.svelte b/src/components/statsclients/AddStatsClientModal.svelte
index 7651e49b..085f4aed 100644
--- a/src/components/statsclients/AddStatsClientModal.svelte
+++ b/src/components/statsclients/AddStatsClientModal.svelte
@@ -58,7 +58,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -78,13 +78,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -101,7 +101,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-statsclient")}
               </h3>
@@ -139,7 +139,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -148,7 +148,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/statsclients/ConfirmStatsClientDeletion.svelte b/src/components/statsclients/ConfirmStatsClientDeletion.svelte
index 7c487126..1f649a9c 100644
--- a/src/components/statsclients/ConfirmStatsClientDeletion.svelte
+++ b/src/components/statsclients/ConfirmStatsClientDeletion.svelte
@@ -23,7 +23,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={cancelDelete}
   >
@@ -41,13 +41,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -61,7 +61,7 @@
                 /></svg
               >
             </div>
-            <!-- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <!-- <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_('attention')}
               </h3>
@@ -81,14 +81,14 @@
           <button
             on:click={deleteClient}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("confirm-delete-statsclient")}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel-keep-statsclient")}
           </button>
diff --git a/src/components/statsclients/CopyStatsClientTokenModal.svelte b/src/components/statsclients/CopyStatsClientTokenModal.svelte
index f224319d..98c6ea6b 100644
--- a/src/components/statsclients/CopyStatsClientTokenModal.svelte
+++ b/src/components/statsclients/CopyStatsClientTokenModal.svelte
@@ -37,7 +37,7 @@
   {#if valueCopy != null}
     <textarea bind:this={areaDom}>{valueCopy}</textarea>
   {/if}
-  <div class="fixed z-10 inset-0 overflow-y-auto">
+  <div class="fixed z-10 inset-0 overflow-y-hidden">
     <div
       class="flex items-end justify-center min-h-screen text-center sm:block p-0 lg:p-4"
     >
@@ -52,13 +52,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -73,7 +73,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("token")}
               </h3>
@@ -127,7 +127,7 @@
           <button
             on:click={close}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
           >
             {$_("yes-i-copied-the-token")}
           </button>
diff --git a/src/components/teams/AddTeamModal.svelte b/src/components/teams/AddTeamModal.svelte
index e5f5f752..7e749b6c 100644
--- a/src/components/teams/AddTeamModal.svelte
+++ b/src/components/teams/AddTeamModal.svelte
@@ -69,7 +69,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -89,13 +89,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -112,7 +112,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-team")}
               </h3>
@@ -190,7 +190,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -199,7 +199,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/teams/ConfirmTeamDeletionModal.svelte b/src/components/teams/ConfirmTeamDeletionModal.svelte
index 748abe0a..c1f4c31d 100644
--- a/src/components/teams/ConfirmTeamDeletionModal.svelte
+++ b/src/components/teams/ConfirmTeamDeletionModal.svelte
@@ -26,7 +26,7 @@
 
 {#if modal_open}
 	<div
-		class="fixed z-10 inset-0 overflow-y-auto"
+		class="fixed z-10 inset-0 overflow-y-hidden"
 		use:clickOutside
 		on:click_outside={cancelDelete}
 	>
@@ -44,13 +44,13 @@
 				aria-hidden="true">&#8203;</span
 			>
 			<div
-				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
 				role="dialog"
 				aria-modal="true"
 				aria-labelledby="modal-headline"
 			>
 				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-					<div class="sm:flex sm:items-start">
+					<div class="">
 						<div
 							class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
 						>
@@ -67,7 +67,7 @@
 								/></svg
 							>
 						</div>
-						<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+						<div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
 							<h3 class="text-lg leading-6 font-medium text-gray-900">
 								{$_("do-you-want-to-delete-the-team-delete_team-name", {
 									values: { teamname: delete_team.name },
@@ -85,14 +85,14 @@
 					<button
 						on:click={deleteTeam}
 						type="button"
-						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
 					>
 						{$_("confirm-delete-team-and-associated-runners")}
 					</button>
 					<button
 						on:click={cancelDelete}
 						type="button"
-						class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+						class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
 					>
 						{$_("cancel-keep-team")}
 					</button>
diff --git a/src/components/tracks/AddTrackModal.svelte b/src/components/tracks/AddTrackModal.svelte
index 7795887c..611c1033 100644
--- a/src/components/tracks/AddTrackModal.svelte
+++ b/src/components/tracks/AddTrackModal.svelte
@@ -67,7 +67,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -87,13 +87,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -110,7 +110,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left max-h-[75vh] overflow-y-auto">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-track")}
               </h3>
@@ -221,7 +221,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -230,7 +230,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/components/users/AddUserModal.svelte b/src/components/users/AddUserModal.svelte
index e4e60eca..e45bf14c 100644
--- a/src/components/users/AddUserModal.svelte
+++ b/src/components/users/AddUserModal.svelte
@@ -84,7 +84,7 @@
 
 {#if modal_open}
   <div
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed z-10 inset-0 overflow-y-hidden"
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
@@ -104,13 +104,13 @@
         aria-hidden="true">&#8203;</span
       >
       <div
-        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto"
+        class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-headline"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
-          <div class="sm:flex sm:items-start">
+          <div class="">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
             >
@@ -127,7 +127,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 text-center sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("create-a-new-user")}
               </h3>
@@ -278,7 +278,7 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             {$_("create")}
           </button>
@@ -287,7 +287,7 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            class="w-full justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hidden lg:block"
           >
             {$_("cancel")}
           </button>
diff --git a/src/locales/de.json b/src/locales/de.json
index f3d7d35b..25c0260e 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -101,20 +101,20 @@
     "count_teams": "Teams",
     "create": "Erstellen",
     "create-a-new": "Erstelle eine neue",
-    "create-a-new-card": "Neue Läuferkarte erstellen",
+    "create-a-new-card": "Läuferkarte erstellen",
     "create-a-new-contact": "Kontakt erstellen",
     "create-a-new-distance-donation": "Erstelle ein neues Sponsoring",
-    "create-a-new-donor": "Neuen Sponsor erstellen",
-    "create-a-new-fixed-donation": "Erstelle eine neue Festbetragsspende",
-    "create-a-new-organization": "Neue Organisation anlegen",
-    "create-a-new-runner": "Neuen Läufer erstellen",
-    "create-a-new-scan-fixed-only": "Neuen Scan erstellen (nur mit Festdistanz)",
-    "create-a-new-scanstation": "Neue Station erstellen",
-    "create-a-new-statsclient": "Neuen Statsclient erstellen",
+    "create-a-new-donor": "Sponsor erstellen",
+    "create-a-new-fixed-donation": "Festbetragsspende erstellen",
+    "create-a-new-organization": "Organisation anlegen",
+    "create-a-new-runner": "Läufer erstellen",
+    "create-a-new-scan-fixed-only": "Scan erstellen (nur mit Festdistanz)",
+    "create-a-new-scanstation": "Station erstellen",
+    "create-a-new-statsclient": "Statsclient erstellen",
     "create-a-new-team": "Erstelle ein neues Team",
-    "create-a-new-track": "Neue Laufstrecke erstellen",
-    "create-a-new-user": "Neuen Benutzer anlegen",
-    "create-a-new-user-group": "Erstelle eine neue Gruppe",
+    "create-a-new-track": "Laufstrecke erstellen",
+    "create-a-new-user": "Benutzer anlegen",
+    "create-a-new-user-group": "Gruppe erstellen",
     "create-and-generate-pdf": "Erstellen und PDF herunterladen",
     "create-bulk-blanco-cards": "Blankokarten erstellen",
     "create-bulk-cards": "Blankokarten erstellen",