[6.x] Vertically center combobox tags (#13132)

Author: JayGeorge

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 */

resources/js/components/ui/Combobox.vue

@@ -472,7 +472,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>
 
@@ -502,6 +502,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;