From b3dc0097fd60da4aff16d908c614cccd13c8a1d6 Mon Sep 17 00:00:00 2001
From: Antoine Clausse <antoine.clausse@overleaf.com>
Date: Wed, 11 Jun 2025 10:29:30 +0200
Subject: [PATCH] Merge pull request #26188 from
 overleaf/ac-bs5-fix-redundant-carets

[web] Fix redundant carets in BS5 marketing pages

GitOrigin-RevId: 479687d982db23e4f5f2efcc3f5f39bb78f0eb24
---
 .../views/layout/navbar-marketing-bootstrap-5.pug |  3 ---
 .../components/emails/add-email/country-input.tsx |  2 +-
 .../stylesheets/bootstrap-5/components/all.scss   |  1 +
 .../stylesheets/bootstrap-5/components/caret.scss | 15 +++++++++++++++
 .../stylesheets/bootstrap-5/components/form.scss  |  5 +++++
 5 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/caret.scss

diff --git a/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug b/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug
index 92e2d4301d..c581ab29ce 100644
--- a/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug
+++ b/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug
@@ -55,7 +55,6 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 								event-segmentation={"item": "admin", "location": "top-menu"}
 							)
 								| Admin
-								span.caret
 							+dropdown-menu.dropdown-menu-end
 								if canDisplayAdminMenu
 									+dropdown-menu-link-item()(href="/admin") Manage Site
@@ -97,7 +96,6 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 										event-segmentation={"item": item.trackingKey, "location": "top-menu"}
 									)
 										| !{translate(item.text)}
-										span.caret
 									+dropdown-menu.dropdown-menu-end
 										each child in item.dropdown
 											if child.divider
@@ -173,7 +171,6 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
 								event-segmentation={"item": "account", "location": "top-menu"}
 							)
 								| #{translate('Account')}
-								span.caret
 							+dropdown-menu.dropdown-menu-end
 								+dropdown-menu-item
 									div.disabled.dropdown-item #{getSessionUser().email}
diff --git a/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx b/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx
index f55344a2f2..e94b39c935 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx
@@ -60,9 +60,9 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
             },
             ref: inputRef,
           })}
+          append={<i className="caret" aria-hidden />}
           placeholder={t('country')}
         />
-        <i className="caret" />
       </div>
       <ul
         {...getMenuProps()}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index c2aeb28516..639f6b4ff5 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -1,6 +1,7 @@
 @import 'accordion';
 @import 'button';
 @import 'button-group';
+@import 'caret';
 @import 'dropdown-menu';
 @import 'image';
 @import 'notifications';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/caret.scss b/services/web/frontend/stylesheets/bootstrap-5/components/caret.scss
new file mode 100644
index 0000000000..5f4deb3296
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/caret.scss
@@ -0,0 +1,15 @@
+:root {
+  --caret-width-base: 4px;
+}
+
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top: var(--caret-width-base) solid;
+  border-right: var(--caret-width-base) solid transparent;
+  border-left: var(--caret-width-base) solid transparent;
+  margin-top: calc(-1 * var(--caret-width-base) / 2);
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
index 31b685de8a..3b86f5e51d 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
@@ -151,6 +151,11 @@
     height: 100%;
     display: flex;
     align-items: center;
+
+    &:has(> i),
+    &:has(> .material-symbols) {
+      pointer-events: none;
+    }
   }
 
   .form-control-start-icon {