fix: add correct support of mobiles for the afcl modal

Author: yaroslav8765

adminforth/spa/src/afcl/Modal.vue

@@ -10,11 +10,11 @@
         v-show="isModalOpen" 
         v-if="!removeFromDom" 
         @click="backdropClick" 
-        class="bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-1rem max-h-full flex"
+        class="bg-black/50 overflow-y-auto overscroll-contain overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-1rem max-h-full flex"
         :class="props.backgroundCustomClasses"
       >
         <!-- Modal content -->
-        <div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
+        <div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund mx-4 sm:mx-0">
 
           <!-- Modal body -->
           <div class="text-lightDialogBodyText dark:text-darkDialogBodyText">
@@ -28,22 +28,22 @@
             :class="props.modalCustomClasses"
           >
             <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm w-full">
-              <h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">Confirm Close</h2>
+              <h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ t('Confirm Close') }}</h2>
               <p class="mb-6 text-lightDialogBodyText dark:text-darkDialogBodyText">{{ props.closeConfirmationText }}</p>
               <div class="flex justify-end">
                 <Button
                   class="me-3 !bg-gray-50 dark:!bg-gray-700 !text-lightDialogBodyText dark:!text-darkDialogBodyText hover:!bg-gray-100 dark:hover:!bg-gray-600 !border-gray-200 dark:!border-gray-600"
                   @click="showConfirmationOnClose = false"
                 >
-                  Cancel
+                  {{ t('Cancel') }}
                 </Button>
                 <Button
                   @click="
                     showConfirmationOnClose = false;
                     close();
                   "
                 >
-                  Confirm
+                  {{ t('Confirm') }}
                 </Button>
               </div>
             </div>
@@ -56,8 +56,10 @@
 <script setup lang="ts">
 import Button from "./Button.vue";
 import { ref, onMounted, nextTick, onUnmounted, computed, type Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const isModalOpen = ref(false);
+const { t } = useI18n();
 
 const removeFromDom = computed(() => {
   return props.removeFromDomOnClose && !isModalOpen.value;

adminforth/spa/src/components/AcceptModal.vue

@@ -6,7 +6,7 @@
       backgroundCustomClasses="z-[998]"
       modalCustomClasses="z-[999] flex items-center justify-center" 
     >
-      <div class="relative p-6 sm:p-8 w-[440px] bg-white rounded-lg shadow-xl dark:bg-gray-800" >
+      <div class="relative p-6 sm:p-8 sm:w-[440px] rounded-lg shadow-xl dark:bg-gray-800" >
 
         <button type="button" @click="modalStore.togleModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-900 transition-colors dark:hover:text-white" >
           <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">

dev-demo/custom/AfComponents.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="flex gap-10">
+  <div class="flex flex-wrap gap-10 max-w-screen">
     <div class="flex flex-col max-w-[200px] m-10 mt-20 gap-10">
       <Checkbox :disabled="false"><p>afdsdfsdfsdgsdgsgdsggdg</p> </Checkbox>
       <Button @click="doSmth"