configurations: joystick: resize profile buttons to fit a 4th item

Signed-off-by: Arturo Manzoli <[email protected]>

Author: ArturoManzoli

src/views/ConfigurationJoystickView.vue

@@ -3,7 +3,7 @@
     <template #title>Joystick configuration </template>
     <template #content>
       <div
-        :class="interfaceStore.isOnSmallScreen ? 'max-w-[88vw] max-h-[95vh]' : 'max-w-[880px] max-h-[80vh]'"
+        :class="interfaceStore.isOnSmallScreen ? 'max-w-[88vw] max-h-[95vh]' : 'max-w-[910px] max-h-[80vh]'"
         class="overflow-y-auto"
       >
         <div
@@ -44,8 +44,8 @@
               </div>
             </template>
             <template #content>
-              <div class="flex flex-col items-center h-[225px] overflow-hidden">
-                <div class="flex flex-col items-center">
+              <div class="flex flex-col items-center h-[225px] overflow-visible">
+                <div class="flex flex-col w-full items-center">
                   <div
                     v-if="
                       controllerStore.availableButtonActions.every((b) => b.protocol === JoystickProtocol.CockpitAction)
@@ -79,23 +79,23 @@
                       class="scale-[85%] -mb-4"
                     />
                   </div>
-                  <div class="flex w-full justify-center mb-2">
+                  <div class="w-full overflow-x-auto overflow-y-hidden px-2 whitespace-nowrap">
                     <div
                       v-for="functionMapping in controllerStore.protocolMappings"
                       :key="functionMapping.name"
-                      class="relative mx-2"
+                      class="relative inline-block align-top mx-1"
                     >
                       <!-- Container for active profile -->
                       <div
                         v-if="activeProfileName === functionMapping.name"
                         class="flex flex-col items-center bg-[#FFFFFF15] rounded-lg p-2 border border-[#FFFFFF30]"
                       >
                         <v-btn
-                          class="text-md bg-[#FFFFFF23]"
+                          class="text-md bg-[#FFFFFF23] px-2"
                           size="small"
                           :class="{
                             'bg-[#FFFFFF43]': selectedProfile.name === functionMapping.name,
-                            'text-sm': interfaceStore.isOnSmallScreen,
+                            'text-xs': interfaceStore.isOnSmallScreen,
                           }"
                           @click="selectProfile(functionMapping)"
                         >
@@ -107,7 +107,7 @@
                       <!-- Regular profile button -->
                       <div v-else class="relative mt-2">
                         <v-btn
-                          class="text-[13px] bg-[#FFFFFF23] px-2"
+                          class="text-[12px] bg-[#FFFFFF23] px-2"
                           :class="{
                             'bg-[#FFFFFF43]': selectedProfile.name === functionMapping.name,
                             'text-sm': interfaceStore.isOnSmallScreen,
@@ -122,7 +122,7 @@
                           v-if="selectedProfile.name === functionMapping.name && isSelectedProfileDifferentFromActive"
                           icon
                           size="x-small"
-                          class="absolute top-3 -right-3 text-white bg-[#51565B] rounded-full"
+                          class="absolute top-3 -right-2 text-white bg-[#51565B] rounded-full"
                           @click.stop="switchToSelectedProfile"
                         >
                           <v-icon size="14">mdi-swap-horizontal</v-icon>