various style improvements on sm screens

components/Layout/Parameters/Table.vue

@@ -10,6 +10,7 @@ A data table for the parameters page
       <div class="flex-grow-1" />
 
       <v-btn
+        v-if="smAndUp && actions.includes(TABLE_ACTION.ADD)"
         prepend-icon="fa fa-plus"
         class="theme-neutral"
         @click="emit('addClicked')"
@@ -17,9 +18,6 @@ A data table for the parameters page
         {{ i18n.t('add') }}
       </v-btn>
     </div>
-    <div class="d-flex justify-end" v-if="actions.includes(TABLE_ACTION.ADD)">
-
-    </div>
 
     <v-table>
       <thead>
@@ -70,13 +68,24 @@ A data table for the parameters page
         </tr>
       </tbody>
     </v-table>
+
+    <div class="d-flex justify-end my-3" v-if="xs && actions.includes(TABLE_ACTION.ADD)">
+      <v-btn
+        prepend-icon="fa fa-plus"
+        class="theme-neutral"
+        @click="emit('addClicked')"
+      >
+        {{ i18n.t('add') }}
+      </v-btn>
+    </div>
+
   </div>
 </template>
 
 <script setup lang="ts">
 import {TABLE_ACTION} from '~/types/enum/enums';
-import UrlUtils from '~/services/utils/urlUtils';
 import type {ColumnDefinition} from '~/types/interfaces';
+import {useDisplay} from 'vuetify';
 
 const props = defineProps({
   /**
@@ -140,6 +149,8 @@ const i18n = useI18n()
 
 const emit = defineEmits(['editClicked', 'deleteClicked', 'addClicked'])
 
+const { smAndUp, xs } = useDisplay()
+
 const getId = (item: object) => {
   return item[props.identifier]
 }

components/Ui/Button/Submit.vue

@@ -1,6 +1,6 @@
 <template>
   <v-btn
-    class="mr-4 theme-primary"
+    class="submit-btn theme-primary"
     :class="hasOtherActions ? 'pr-0' : ''"
     @click="submitAction(mainAction)"
     ref="mainBtn"
@@ -88,6 +88,15 @@ const hasOtherActions: ComputedRef<boolean> = computed(() => {
 </script>
 
 <style scoped>
+
+.submit-btn {
+  margin-right: 12px;
+
+  @media (max-width: 600px) {
+    margin: 0;
+  }
+}
+
 .v-list-item--dense {
   min-height: 25px;
 }

components/Ui/Form.vue

@@ -411,6 +411,15 @@ defineExpose({ validate })
 <style scoped>
 .btnActions {
   text-align: right;
+
+  @media (max-width: 600px) {
+    :deep(.v-col-12) {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+    }
+  }
+
 }
 
 .confirmation-dlg-actions {

pages/parameters/super_admin.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="explanation">
-      <div class="px-4 d-flex flex-row align-center">
+      <div class="px-4 d-flex flex-row align-center justify-center py-2">
         <v-icon class="theme-info">fa fa-info</v-icon>
       </div>
       <div class="px-2">
@@ -85,6 +85,11 @@ const rules = () => [
     height: 28px;
     width: 28px;
   }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    justify-content: center;
+  }
 }
 
 .v-table td:first-child {

pages/parameters/website.vue

@@ -8,7 +8,7 @@
     >
       <v-row>
         <v-col cols="12">
-          <div class="my-5 d-flex flex-row">
+          <div class="section-header">
             <div class="flex-grow-1 align-self-center">
               <span>{{ $t('your_opentalent_website_address_is') }} : </span>
               <strong class="ml-2">
@@ -17,6 +17,7 @@
                 </a>
               </strong>
             </div>
+
             <div v-if="!organizationProfile.isCmf">
               <v-btn
                 v-if="!parameters.desactivateOpentalentSiteWeb"
@@ -72,7 +73,7 @@
           />
 
           <div class="mb-6">
-            <div class="d-flex flex-row">
+            <div class="section-header">
               <h4 class="flex-grow-1 align-self-center">
                 {{ $t('your_subdomains') }}
               </h4>
@@ -197,6 +198,23 @@ const onDialogYesBtnClick = () => {
 </script>
 
 <style scoped lang="scss">
+
+.section-header {
+  margin: 10px 0;
+  display: flex;
+  flex-direction: row;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+
+    :deep(.v-btn) {
+      height: auto;
+      margin: 15px 0;
+      white-space: normal;
+    }
+  }
+}
+
 .subdomainItem {
   cursor: pointer;
   border: solid 1px rgb(var(--v-theme-neutral-strong));