Merge pull request #26188 from overleaf/ac-bs5-fix-redundant-carets

[web] Fix redundant carets in BS5 marketing pages

GitOrigin-RevId: 479687d982db23e4f5f2efcc3f5f39bb78f0eb24

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}

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()}

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';

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);
+}

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 {