Ajout de la fonctionnalité de réduction de card lorsque l'on clique sur une des trois card dans le gamecontrol

ui/src/components/CardSoundboard.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-card tile outlined class="card">
-    <v-card-title class="card__title primary">
+  <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
+    <v-card-title class="card__title primary" @click="toggleCardSize">
       <v-icon left class="white--text pr-5 pl-2" size="40">mdi-music-box-multiple</v-icon>
       Soundboard
     </v-card-title>
@@ -40,4 +40,22 @@
 
 <script setup>
   import MqttButton from './MqttButton.vue';
+  import { ref } from 'vue';
+
+  // Variable pour contrôler l'état de la carte
+  const isCardReduced = ref(false);
+
+  // Méthode pour basculer l'état de la carte
+  function toggleCardSize() {
+    isCardReduced.value = !isCardReduced.value;
+  }
 </script>
+
+<style scoped>
+  .card--reduced {
+    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
+    width: 190px;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+  }
+</style>