fix responsive display for shop/validation page

pages/shop/try/validation.vue

@@ -24,7 +24,7 @@
           color="secondary"
           to="/opentalent-artist"
         >
-          Retour à la page Opentalent Artist
+          {{ smAndUp ? 'Retour à la page Opentalent Artist' : 'Retour' }}
         </v-btn>
       </v-card-actions>
     </div>
@@ -55,6 +55,7 @@
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
+import { useDisplay } from 'vuetify'
 import { useAp2iRequestService } from '~/composables/data/useAp2iRequestService'
 import { useAp2iErrorHandler } from '~/composables/utils/useAp2iErrorHandler'
 import UrlUtils from '~/services/utils/urlUtils'
@@ -64,6 +65,8 @@ const { ap2iRequestService } = useAp2iRequestService(false)
 const runtimeConfig = useRuntimeConfig()
 const { processApiError } = useAp2iErrorHandler()
 
+const { smAndUp } = useDisplay()
+
 const loading = ref(true)
 const validationSuccess: Ref<boolean | null> = ref(null)
 const errorMsg: Ref<string | null> = ref(null)
@@ -121,23 +124,83 @@ onMounted(async () => {
 .v-card {
   margin: 4rem 20%;
   padding: 2rem;
+
+  // Responsive breakpoints for small screens
+  @media (max-width: 960px) {
+    margin: 2rem 10%;
+  }
+
+  @media (max-width: 640px) {
+    margin: 1rem 5%;
+    padding: 1.5rem;
+  }
+
+  @media (max-width: 480px) {
+    margin: 0.5rem 2%;
+    padding: 1rem;
+  }
 }
 
 .v-card-title {
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--primary-color);
+
+  // Responsive font sizes
+  @media (max-width: 640px) {
+    font-size: 1.5rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 1.3rem;
+  }
 }
 
 .v-card-text {
   font-size: 1.1rem;
   line-height: 1.6;
 
+  // Responsive font sizes
+  @media (max-width: 640px) {
+    font-size: 1rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 0.95rem;
+  }
+
   p {
     margin-bottom: 1rem;
   }
 }
 
+// Make buttons responsive on small screens
+.v-card-actions {
+  @media (max-width: 640px) {
+    .v-btn {
+      font-size: 0.9rem;
+      padding: 8px 16px;
+
+      // Allow button text to wrap on very small screens
+      white-space: normal;
+      text-align: center;
+      line-height: 1.2;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .v-btn {
+      font-size: 0.85rem;
+      padding: 6px 12px;
+      min-width: auto;
+
+      // Stack button text on multiple lines if needed
+      flex-direction: column;
+      gap: 4px;
+    }
+  }
+}
+
 .error-message {
   color: var(--warning-color);
   font-weight: 500;