Truncate text in content switcher button, allow width to change (#738)

WordPress · Mar 1, 2022 · c8844bd · c8844bd
1 parent e0ac241
commit c8844bd
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/components/VContentSwitcher/VSearchTypeButton.vue b/src/components/VContentSwitcher/VSearchTypeButton.vue
@@ -1,7 +1,10 @@
 <template>
   <VButton
     class="flex flex-row font-semibold py-2 text-sr md:text-base"
-    :class="sizeClasses"
+    :class="[
+      sizeClasses,
+      showLabel ? 'max-w-[10rem] sm:max-w-[20rem] md:max-w-[16rem]' : '',
+    ]"
     :variant="buttonVariant"
     size="disabled"
     :aria-label="buttonLabel"
@@ -12,7 +15,7 @@
     <span
       v-show="showLabel"
       class="hidden xs:block"
-      :class="{ 'ms-2 md:w-20 text-left': showLabel }"
+      :class="{ 'ms-2 truncate text-left': showLabel }"
       >{{ buttonLabel }}</span
     >
     <VIcon