From 427419e6a59c81eee1ddd2d608f13ca01fef4954 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Wed, 10 Dec 2025 09:21:03 +0000
Subject: [PATCH] Merge pull request #30233 from overleaf/td-select-check-icon

Fix regression with select check icon

GitOrigin-RevId: c76e126c26395429cd3d41ac4e6ee36259062224
---
 .../features/settings/components/emails/downshift-input.tsx | 4 ++--
 services/web/frontend/js/shared/components/select.tsx       | 6 ++----
 services/web/frontend/stylesheets/ciam/ciam-layout.scss     | 4 ++++
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx
index 247a89757d..ab032fe3a2 100644
--- a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx
@@ -81,7 +81,7 @@ function Downshift({
     )
   }
 
-  const TickIcon = function () {
+  const tickIcon = function () {
     return isCiam ? <Check /> : 'check'
   }
 
@@ -116,7 +116,7 @@ function Downshift({
               active: selectedItem === item,
               'dropdown-item-highlighted': highlightedIndex === index,
             })}
-            trailingIcon={selectedItem === item ? <TickIcon /> : undefined}
+            trailingIcon={selectedItem === item ? tickIcon() : undefined}
           >
             {highlightMatchedCharacters(item, inputValue)}
           </DropdownItem>
diff --git a/services/web/frontend/js/shared/components/select.tsx b/services/web/frontend/js/shared/components/select.tsx
index e501ae82fb..34774811fe 100644
--- a/services/web/frontend/js/shared/components/select.tsx
+++ b/services/web/frontend/js/shared/components/select.tsx
@@ -152,7 +152,7 @@ export const Select = <T,>({
     value = defaultText
   }
 
-  const TickIcon = function () {
+  const tickIcon = function () {
     return isCiam ? <Check /> : 'check'
   }
 
@@ -183,9 +183,7 @@ export const Select = <T,>({
                 })}
                 active={selectedItem === item}
                 trailingIcon={
-                  selectedIcon && selectedItem === item ? (
-                    <TickIcon />
-                  ) : undefined
+                  selectedIcon && selectedItem === item ? tickIcon() : undefined
                 }
                 description={itemToSubtitle ? itemToSubtitle(item) : undefined}
                 {...itemProps}
diff --git a/services/web/frontend/stylesheets/ciam/ciam-layout.scss b/services/web/frontend/stylesheets/ciam/ciam-layout.scss
index b0f88ba992..69109243eb 100644
--- a/services/web/frontend/stylesheets/ciam/ciam-layout.scss
+++ b/services/web/frontend/stylesheets/ciam/ciam-layout.scss
@@ -225,6 +225,10 @@
 
   .dropdown-item {
     border-radius: var(--ds-border-radius-200);
+
+    :has(.dropdown-item-trailing-icon) {
+      padding-right: calc(var(--ds-font-size-350) + var(--ds-spacing-200));
+    }
   }
 
   // Allow dropdowns to be wider than the form container where necessary