diff --git a/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue b/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue
index e0ba59b22..047e34251 100644
--- a/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue
+++ b/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue
@@ -33,7 +33,7 @@
 							decoding="async"
 						/>
 						<LayersIcon v-else class="size-5 shrink-0 text-primary" />
-						<span class="min-w-0 flex-1 truncate px-0.5 font-semibold text-primary">
+						<span class="min-w-0 flex-1 truncate px-0.5 font-semibold text-inherit">
 							{{ selectedProjectLabel }}
 						</span>
 						<ChevronLeftIcon
@@ -173,7 +173,7 @@
 					<div class="flex min-h-7 min-w-0 max-w-full flex-1 items-center gap-1.5 pr-1">
 						<BlocksIcon class="size-5 shrink-0 text-primary" />
 						<span
-							class="min-w-0 flex-1 truncate px-0.5 font-semibold text-primary"
+							class="min-w-0 flex-1 truncate px-0.5 font-semibold text-inherit"
 							:title="mobileSelectedBreakdownLabel"
 						>
 							{{ mobileSelectedBreakdownLabel }}
@@ -247,7 +247,7 @@
 										class="size-5 shrink-0 text-primary"
 									/>
 									<BoxIcon v-else class="size-5 shrink-0 text-primary" />
-									<span class="min-w-0 flex-1 truncate px-1.5 font-semibold text-primary">
+									<span class="min-w-0 flex-1 truncate px-1.5 font-semibold text-inherit">
 										{{ selectedProjectLabel }}
 									</span>
 								</div>
@@ -416,7 +416,7 @@
 									<template #input-content="{ isOpen, openDirection }">
 										<div class="flex min-h-7 min-w-0 flex-1 items-center gap-1.5 pr-1">
 											<span
-												class="min-w-0 flex-1 truncate font-semibold text-primary"
+												class="min-w-0 flex-1 truncate font-semibold text-inherit"
 												:title="selectedBreakdownLabel"
 											>
 												{{ selectedBreakdownLabel }}
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index c0df2aa3c..1c260895d 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -18,7 +18,8 @@
 					<Combobox
 						v-model="currentFilterType"
 						class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
-						trigger-class="!h-10"
+						trigger-type="base"
+						trigger-size="lg"
 						:options="filterTypes"
 						:placeholder="formatMessage(commonMessages.filterByLabel)"
 						@select="goToPage(1)"
@@ -36,7 +37,8 @@
 					<Combobox
 						v-model="currentSortType"
 						class="!w-full flex-grow sm:!w-[240px] sm:flex-grow-0"
-						trigger-class="!h-10"
+						trigger-type="base"
+						trigger-size="lg"
 						:options="sortTypes"
 						:placeholder="formatMessage(commonMessages.sortByLabel)"
 						@select="goToPage(1)"
@@ -56,7 +58,8 @@
 					<Combobox
 						v-model="itemsPerPage"
 						class="!w-full flex-grow sm:!w-[160px] sm:flex-grow-0 lg:!w-[140px]"
-						trigger-class="!h-10"
+						trigger-type="base"
+						trigger-size="lg"
 						:options="itemsPerPageOptions"
 						placeholder="Items per page"
 						@select="goToPage(1)"
diff --git a/apps/frontend/src/pages/moderation/reports/index.vue b/apps/frontend/src/pages/moderation/reports/index.vue
index 20d80f948..c2e5d0729 100644
--- a/apps/frontend/src/pages/moderation/reports/index.vue
+++ b/apps/frontend/src/pages/moderation/reports/index.vue
@@ -21,6 +21,8 @@
 					class="!w-full flex-grow sm:!w-[200px] sm:flex-grow-0"
 					:options="messageFilterTypes"
 					:placeholder="formatMessage(commonMessages.filterByLabel)"
+					trigger-type="base"
+					trigger-size="lg"
 					@select="goToPage(1)"
 				>
 					<template #selected="{ label: messageLabel }">
@@ -38,6 +40,8 @@
 					class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
 					:options="sortTypes"
 					:placeholder="formatMessage(commonMessages.sortByLabel)"
+					trigger-type="base"
+					trigger-size="lg"
 					@select="goToPage(1)"
 				>
 					<template #selected="{ label: sortingLabel }">
@@ -62,6 +66,7 @@
 					:max-tag-rows="1"
 					fit-content
 					trigger-type="base"
+					trigger-size="lg"
 					checkbox-position="right"
 					show-selection-actions
 					should-show-select-all
@@ -70,7 +75,7 @@
 					<template #input-content="{ isOpen, openDirection }">
 						<div class="flex min-h-7 min-w-0 max-w-full flex-1 items-center gap-1.5 pr-1">
 							<LayersIcon class="size-5 shrink-0 text-primary" />
-							<span class="min-w-0 flex-1 truncate px-0.5 font-semibold text-primary">
+							<span class="min-w-0 flex-1 truncate px-0.5 font-semibold text-inherit">
 								{{
 									currentReporterOrProject.length === 0
 										? 'All Reports'
diff --git a/apps/frontend/src/pages/moderation/technical-review/index.vue b/apps/frontend/src/pages/moderation/technical-review/index.vue
index 7ba50674a..23877ace6 100644
--- a/apps/frontend/src/pages/moderation/technical-review/index.vue
+++ b/apps/frontend/src/pages/moderation/technical-review/index.vue
@@ -611,6 +611,8 @@ watch(totalPages, (pages) => {
 					v-model="currentResponseFilter"
 					class="!w-full flex-grow sm:!w-[120px] sm:flex-grow-0"
 					:options="responseFilterTypes"
+					trigger-type="base"
+					trigger-size="lg"
 				>
 					<template #selected>
 						<span class="flex flex-row gap-2 align-middle font-semibold">
@@ -625,6 +627,8 @@ watch(totalPages, (pages) => {
 					class="!w-full flex-grow sm:!w-[215px] sm:flex-grow-0"
 					:options="sortTypes"
 					:placeholder="formatMessage(commonMessages.sortByLabel)"
+					trigger-type="base"
+					trigger-size="lg"
 				>
 					<template #selected>
 						<span class="flex flex-row gap-2 align-middle font-semibold">
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 8fbc0efd4..6afddda17 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -83,7 +83,8 @@
 				/>
 				<span
 					v-if="selectedOption"
-					class="min-w-0 truncate text-primary font-semibold leading-tight"
+					class="min-w-0 truncate font-semibold leading-tight"
+					:class="triggerType ? 'text-inherit' : 'text-primary'"
 				>
 					<slot name="selected" :label="selectedTriggerText">{{ selectedTriggerText }}</slot>
 				</span>
diff --git a/packages/ui/src/components/base/MultiSelect.vue b/packages/ui/src/components/base/MultiSelect.vue
index f7e367809..f765bd90e 100644
--- a/packages/ui/src/components/base/MultiSelect.vue
+++ b/packages/ui/src/components/base/MultiSelect.vue
@@ -43,7 +43,8 @@
 					<span
 						v-for="tag in visibleTags"
 						:key="String(tag.value)"
-						class="inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2 py-1 text-sm font-medium text-primary transition-all hover:brightness-[115%]"
+						class="inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2 py-1 text-sm font-medium transition-all hover:brightness-[115%]"
+						:class="triggerType ? 'text-inherit' : 'text-primary'"
 						@click.stop="removeTag(tag.value)"
 					>
 						{{ tag.label }}
diff --git a/packages/ui/src/components/version/VersionFilterControl.vue b/packages/ui/src/components/version/VersionFilterControl.vue
index 96b1cfa71..5c38c04da 100644
--- a/packages/ui/src/components/version/VersionFilterControl.vue
+++ b/packages/ui/src/components/version/VersionFilterControl.vue
@@ -13,7 +13,7 @@
 				<template #input-content="{ isOpen, openDirection }">
 					<div class="flex items-center gap-2">
 						<FilterIcon class="h-5 w-5 text-secondary" />
-						<span class="font-semibold text-primary">Platforms</span>
+						<span class="font-semibold text-inherit">Platforms</span>
 						<ChevronLeftIcon
 							class="h-5 w-5 text-secondary transition-transform duration-150"
 							:class="
@@ -37,7 +37,7 @@
 				<template #input-content="{ isOpen, openDirection }">
 					<div class="flex items-center gap-2">
 						<FilterIcon class="h-5 w-5 text-secondary" />
-						<span class="font-semibold text-primary">Game versions</span>
+						<span class="font-semibold text-inherit">Game versions</span>
 						<ChevronLeftIcon
 							class="h-5 w-5 text-secondary transition-transform duration-150"
 							:class="
@@ -69,7 +69,7 @@
 				<template #input-content="{ isOpen, openDirection }">
 					<div class="flex items-center gap-2">
 						<FilterIcon class="h-5 w-5 text-secondary" />
-						<span class="font-semibold text-primary">Channels</span>
+						<span class="font-semibold text-inherit">Channels</span>
 						<ChevronLeftIcon
 							class="h-5 w-5 text-secondary transition-transform duration-150"
 							:class="