diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 7f7ceec9d78..94ed25d01ac 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -96,11 +96,15 @@
     /* =Jay. Sometimes this is handy e.g. the text inside the command palette searchbox */
     text-box: cap alphabetic;
 }
-@utility st-text-trim-ex-alphabetic {
-    text-box: ex alphabetic;
+@utility st-text-trim-optical {
+    /* =Jay. Trim to x-height, then nudge the text down so it's centred halfway between x-height and cap height. Lowercase and Capitalised labels both look centred */
+    @supports (text-box: ex alphabetic) {
+        text-box: ex alphabetic;
+        padding-top: calc((1cap - 1ex) / 2);
+    }
 }
 @utility st-text-trim-optical-cap {
-    /* =Jay. Trim to x-height, then nudge the text down so it sits between x-height and cap height, a touch nearer cap height. Lowercase and Capitalised labels both look centred in small, tight boxes like badges */
+    /* =Jay. Like st-text-trim-optical, but a touch nearer cap height, which suits smaller, tighter boxes like badges */
     @supports (text-box: ex alphabetic) {
         text-box: ex alphabetic;
         padding-top: calc((1cap - 1ex) * 3 / 4);
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index faa5472b0b8..1e0584229bb 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -74,8 +74,8 @@
                         :key="rule"
                         class="sortable-item"
                     >
-                        <Badge pill size="lg">
-                            {{ rule }}
+                        <Badge pill size="lg" class="*:st-text-trim-optical">
+                            <span>{{ rule }}</span>
 
                             <button
                                 type="button"
diff --git a/resources/js/components/fieldtypes/DictionaryFieldtype.vue b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
index 12042303aa7..a090128ba21 100644
--- a/resources/js/components/fieldtypes/DictionaryFieldtype.vue
+++ b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
@@ -35,7 +35,7 @@
                         :key="getOptionValue(option)"
                         class="sortable-item cursor-grab active:cursor-grabbing"
                     >
-                        <Badge size="lg" color="white">
+                        <Badge size="lg" color="white" class="[&>*:not(svg)]:st-text-trim-optical">
                             <Icon v-if="option.icon" :name="option.icon" />
                             <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
                             <div v-else>{{ __(getOptionLabel(option)) }}</div>
diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index 5f030d19379..4bfde9abfad 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -614,7 +614,7 @@ defineExpose({
                         :key="getOptionValue(option)"
                         class="sortable-item cursor-grab active:cursor-grabbing"
                     >
-                        <Badge pill size="lg" class="[&>*]:st-text-trim-ex-alphabetic">
+                        <Badge pill size="lg" class="[&>*:not(svg)]:st-text-trim-optical">
                             <Icon v-if="option.icon" :name="option.icon" />
                             <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
                             <div v-else>{{ __(getOptionLabel(option)) }}</div>
@@ -639,10 +639,3 @@ defineExpose({
     </div>
 </template>
 
-<style scoped>
-    @supports(text-box: ex alphabetic) {
-        [data-ui-badge] {
-            padding-block: 0.65rem;
-        }
-    }
-</style>