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

[web] Fix redundant carets in BS5 marketing pages

GitOrigin-RevId: 479687d982db23e4f5f2efcc3f5f39bb78f0eb24

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 {