Fix popover width; modal tab button

src/components/VContentSwitcher/VSearchTypePopover.vue

@@ -15,7 +15,6 @@
     </template>
     <VSearchTypes
       id="content-switcher-popover"
-      class="pt-2"
       size="small"
       :use-links="placement === 'header'"
       @select="handleSelect"

src/components/VContentSwitcher/VSearchTypes.vue

@@ -4,8 +4,7 @@
     :size="size"
     :bordered="bordered"
     type="radiogroup"
-    class="z-10"
-    :class="{ 'w-[260px]': size === 'small' }"
+    :class="{ 'w-66 pt-2': size === 'small' }"
   >
     <div
       v-for="(category, index) in contentTypeGroups"
@@ -15,7 +14,7 @@
         'mt-2': index > 0,
         'border-t border-dark-charcoal-20 bg-dark-charcoal-06':
           index > 0 && !bordered,
-        'gap-1': size === 'small',
+        'w-66 gap-1': size === 'small',
       }"
     >
       <h4

src/components/VContentSwitcherOld/VSearchTypesOld.vue

@@ -4,7 +4,7 @@
     :size="size"
     :bordered="bordered"
     type="radiogroup"
-    class="z-10 max-w-full md:w-[260px]"
+    :class="{ 'w-66 pt-2': size === 'small' }"
   >
     <div
       v-for="(category, index) in contentTypeGroups"
@@ -13,6 +13,7 @@
         'mt-2': index > 0,
         'border-t border-dark-charcoal-20 bg-dark-charcoal-06':
           index > 0 && !bordered,
+        'w-66': size === 'small',
       }"
     >
       <h4
@@ -24,7 +25,7 @@
       <VSearchTypeItemOld
         v-for="(item, idx) in category.items"
         :key="item"
-        class="md:mb-1"
+        :class="{ 'mb-1': size === 'small' }"
         :item="item"
         :item-id="idx"
         :icon="content.icons[item]"

src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue

@@ -16,9 +16,20 @@
       @change="changeSelectedTab"
     >
       <template #tabs>
-        <VTab id="content-settings" size="medium" class="category me-4">{{
-          $t("search-type.heading")
-        }}</VTab>
+        <VTab
+          v-if="showFilters"
+          id="content-settings"
+          size="medium"
+          class="category me-4"
+          >{{ $t("search-type.heading") }}</VTab
+        >
+        <h2
+          v-else
+          class="label-regular relative my-2 flex h-12 items-center gap-x-2 px-2 me-4 after:absolute after:right-1/2 after:bottom-[-0.625rem] after:h-0.5 after:w-full after:translate-x-1/2 after:translate-y-[-50%] after:bg-dark-charcoal"
+        >
+          <VIcon :icon-path="searchType.icon" />
+          {{ $t("search-type.heading") }}
+        </h2>
         <VTab v-if="showFilters" id="filters" size="medium" class="category">{{
           $t("filters.title")
         }}</VTab>
@@ -64,10 +75,12 @@ import { computed, defineComponent, ref } from "@nuxtjs/composition-api"
 import { useSearchStore } from "~/stores/search"
 
 import { useI18n } from "~/composables/use-i18n"
+import useSearchType from "~/composables/use-search-type"
 
 import VButton from "~/components/VButton.vue"
-import VModalContent from "~/components/VModal/VModalContent.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
+import VModalContent from "~/components/VModal/VModalContent.vue"
 import VSearchGridFilter from "~/components/VFilters/VSearchGridFilter.vue"
 import VSearchTypes from "~/components/VContentSwitcher/VSearchTypes.vue"
 import VShowResultsButton from "~/components/VHeader/VHeaderMobile/VShowResultsButton.vue"
@@ -80,6 +93,7 @@ import closeIcon from "~/assets/icons/close-small.svg"
 export default defineComponent({
   name: "VContentSettingsModalContent",
   components: {
+    VIcon,
     VModalContent,
     VButton,
     VIconButton,
@@ -114,7 +128,9 @@ export default defineComponent({
   },
   setup(props) {
     const i18n = useI18n()
+
     const searchStore = useSearchStore()
+    const content = useSearchType()
     const selectedTab = ref<"content-settings" | "filters">("content-settings")
     const changeSelectedTab = (tab: "content-settings" | "filters") => {
       selectedTab.value = tab
@@ -131,16 +147,21 @@ export default defineComponent({
     const appliedFilterCount = computed(() => searchStore.appliedFilterCount)
     const clearFiltersLabel = computed(() =>
       searchStore.isAnyFilterApplied
-        ? i18n.tc("filter-list.clear-numbered", appliedFilterCount.value)
+        ? i18n.t("filter-list.clear-numbered", {
+            number: appliedFilterCount.value,
+          })
         : i18n.t("filter-list.clear")
     )
 
+    const searchType = computed(() => content.getSearchTypeProps())
+
     const clearFilters = () => {
       searchStore.clearFilters()
     }
 
     return {
       closeIcon,
+      searchType,
 
       selectedTab,
       changeSelectedTab,

src/components/VHomepageContent.vue

@@ -32,11 +32,11 @@
           :hide="closeContentSwitcher"
           :visible="isContentSwitcherVisible"
           :trigger-element="triggerElement"
+          width="w-66"
           aria-labelledby="search-type-button"
         >
           <VSearchTypes
             size="small"
-            class="pt-2"
             :use-links="false"
             @select="handleSelect"
           />

src/components/VPopover/VPopoverContent.vue

@@ -8,8 +8,8 @@
   >
     <div
       ref="popoverRef"
-      class="popover-content max-w-max overflow-y-auto overflow-x-hidden rounded-sm border border-light-gray bg-white shadow"
-      :class="`z-${zIndex}`"
+      class="popover-content overflow-y-auto overflow-x-hidden rounded-sm border border-light-gray bg-white shadow"
+      :class="[`z-${zIndex}`, width]"
       :style="heightProperties"
       :tabindex="-1"
       @blur="onBlur"
@@ -92,6 +92,12 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    /**
+     * Optional Tailwind class for fixed width.
+     */
+    width: {
+      type: String,
+    },
   },
   /**
    * This is the only documented emitted event but in reality we pass through `$listeners`

tailwind.config.js

@@ -93,6 +93,7 @@ module.exports = {
       40: "10.00rem",
       50: "12.50rem",
       64: "16.00rem",
+      66: "16.25rem",
       70: "17.50rem",
       80: "20.00rem",
       120: "30.00rem",