Merge pull request #22993 from overleaf/rd-searchbar-button-fix-migration

[web] Fix close button alignment of search bar

GitOrigin-RevId: ef6761f6f068090d8cbf7e8922b257bd499ee5c3

services/web/frontend/js/features/project-list/components/search-form.tsx

@@ -91,7 +91,7 @@ function SearchForm({
               inputValue.length > 0 && (
                 <button
                   type="button"
-                  className="project-search-clear-btn"
+                  className="form-control-search-clear-btn"
                   aria-label={t('clear_search')}
                   onClick={handleClear}
                 >

services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx

@@ -226,7 +226,7 @@ export const WithIcons: Story = {
             append={
               <button
                 type="button"
-                className="project-search-clear-btn"
+                className="form-control-search-clear-btn"
                 onClick={handleClear}
               >
                 <MaterialIcon type="clear" />
@@ -246,7 +246,7 @@ export const WithIcons: Story = {
             append={
               <button
                 type="button"
-                className="project-search-clear-btn"
+                className="form-control-search-clear-btn"
                 onClick={handleClear}
               >
                 <MaterialIcon type="clear" />
@@ -265,7 +265,7 @@ export const WithIcons: Story = {
             append={
               <button
                 type="button"
-                className="project-search-clear-btn"
+                className="form-control-search-clear-btn"
                 onClick={handleClear}
               >
                 <MaterialIcon type="clear" />
@@ -286,7 +286,7 @@ export const WithIcons: Story = {
             append={
               <button
                 type="button"
-                className="project-search-clear-btn"
+                className="form-control-search-clear-btn"
                 onClick={handleClear}
                 disabled
               >

services/web/frontend/stylesheets/app/project-list.less

@@ -390,18 +390,6 @@ form.project-search {
   }
 }
 
-.project-search-clear-btn {
-  width: 100%;
-  padding: 0;
-  border: 0;
-  color: @ol-type-color;
-
-  &:hover,
-  &:active {
-    color: @ol-type-color;
-  }
-}
-
 ul.structured-list {
   list-style-type: none;
   margin: 0;

services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss

@@ -61,13 +61,11 @@
 }
 
 @mixin reset-button() {
-  appearance: none;
+  padding: 0;
+  cursor: pointer;
   background: transparent;
   border: 0;
-  cursor: pointer;
-  height: 20px;
-  padding: 0;
-  width: 20px;
+  appearance: none;
 }
 
 @mixin modal-lg {

services/web/frontend/stylesheets/bootstrap-5/components/form.scss

@@ -157,6 +157,13 @@
   .form-control-end-icon {
     right: 0;
     padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));
+
+    .form-control-search-clear-btn {
+      @include reset-button;
+
+      display: flex;
+      justify-content: center;
+    }
   }
 
   --icon-width: 20px;

services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss

@@ -673,10 +673,6 @@ form.project-search {
   }
 }
 
-.project-search-clear-btn {
-  @include reset-button;
-}
-
 .add-affiliation-mobile-wrapper {
   padding: var(--spacing-07) 0;
 }