fix(ui): improve alignment of clear and dropdown indicator buttons in select based fields (#12995)

danicaleroo · web-flow · commit 4c25357831d2 · 2025-07-08T07:06:46.000-04:00
diff --git a/packages/ui/src/elements/DatePicker/index.scss b/packages/ui/src/elements/DatePicker/index.scss
@@ -55,6 +55,7 @@ $cal-icon-width: 18px;
       border: none;
       outline: none;
       padding: 0;
+      display: flex;
       cursor: pointer;
     }
 
diff --git a/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss b/packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss
@@ -3,6 +3,7 @@
 @layer payload-default {
   .clear-indicator {
     cursor: pointer;
+    display: flex;
 
     &:focus-visible {
       outline: var(--accessibility-outline);
diff --git a/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss b/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss
@@ -3,6 +3,7 @@
 @layer payload-default {
   .dropdown-indicator {
     cursor: pointer;
+    display: flex;
     @include btn-reset;
 
     &:focus-visible {
