From 5808d8e6ac6c5a2425dc35b57d55b370ac877046 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Nov 2025 17:45:53 +0000
Subject: [PATCH] [6.x] More accurately vertically center combobox badges using
 progressive enhancement

---
 resources/css/core/utilities.css        | 3 +++
 resources/js/components/ui/Combobox.vue | 8 +++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 7a21faee19..47c9af21bf 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -42,6 +42,9 @@
     /* =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 placeholder-xs {
     /* =Jay. The default of 1em on field inputs feels a bit clumsy/big */
diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index cf0a9231b7..21fae0ab40 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -410,7 +410,7 @@ defineExpose({
                         :key="getOptionValue(option)"
                         class="sortable-item mt-2"
                     >
-                        <Badge pill size="lg">
+                        <Badge pill size="lg" class="[&>*]:st-text-trim-ex-alphabetic">
                             <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
                             <div v-else>{{ __(getOptionLabel(option)) }}</div>
 
@@ -440,6 +440,12 @@ defineExpose({
         z-index: var(--z-index-portal)!important;
     }
 
+    @supports(text-box: ex alphabetic) {
+        [data-ui-badge] {
+            padding-block: 0.65rem;
+        }
+    }
+
     /* Override the hardcoded z-index of Reka's popper content wrapper. When there's a modal present, we need to ensure the popper content is above it. We can't use a direct descendant selector because the modal is inside a portal, so instead we'll check to see if there is modal content present. */
     body:has([data-ui-modal-content]) [data-reka-popper-content-wrapper] {
         z-index: var(--z-index-modal)!important;