From 39783282ede5125299b05ceb7be9196a6f23439d Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Mon, 27 Jan 2025 16:11:43 +0930
Subject: [PATCH] truncate step title a bit for med and smaller

---
 src/profile/ProfileWizard.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/profile/ProfileWizard.vue b/src/profile/ProfileWizard.vue
index 4b869b4..1a715eb 100644
--- a/src/profile/ProfileWizard.vue
+++ b/src/profile/ProfileWizard.vue
@@ -4,11 +4,13 @@
       <template v-for="_step in steps" :key="`step-${_step.id}`">
         <v-stepper-item
           :value="_step.id"
-          :icon="toIcon(_step.state)"
+          :complete-icon="toIcon(_step.state)"
           :color="toColor(_step.state)"
           :complete="_step.state === 'complete'"
-          :title="$t(`${_step.nameKey}`)"
         >
+          <template #title>
+            <span :class="{ 'max-width text-truncate d-inline-block': isMd }">{{ $t(`${_step.nameKey}`) }}</span>
+          </template>
         </v-stepper-item>
 
         <v-divider v-if="hasMoreSteps(_step)" :key="`divider-${_step.id}`" />
@@ -29,8 +31,17 @@
 
 <script>
 import Steps from './steps'
+import { useDisplay } from 'vuetify'
 
 export default {
+  setup() {
+    const { mdAndDown, smAndDown } = useDisplay()
+
+    return {
+      isMd: mdAndDown,
+      isSm: smAndDown,
+    }
+  },
   data: () => ({
     steps: Steps.steps,
     currentStep: {},
@@ -74,3 +85,9 @@ export default {
   },
 }
 </script>
+
+<style>
+.max-width {
+  max-width: 120px;
+}
+</style>