Fix recent searches icon alignment in Safari

What does this MR do?

Fix recent searches icon alignment in Safari

.	Chrome	Safari	Firefox	IE 11	Edge
Before
After

Are there points in the code the reviewer needs to double check?

Why was this MR needed?

The recent searches icon alignment was off in Safari

Does this MR meet the acceptance criteria?

• Tests
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #30642 (closed)

Doesn't look 100% aligned on firefox

assigned to @MadLittleMods

added 52 commits

• ba5de4d2...069c54a7 - 51 commits from branch master
• ee2c7248 - Fix recent searches icon alignment in Safari

Compare with previous version

added 1 commit

• 9ebc19bb - Fix recent searches icon alignment in Safari

Compare with previous version

added 1 commit

• 4c5e8510 - Fix recent searches icon alignment in Safari

Compare with previous version

@ClemMakesApps Updated to fix Firefox a bit. Really tricky to get this satisfactory across Chrome, Firefox, Safari (updated images in OP).

assigned to @ClemMakesApps

marked the task All builds are passing as completed

@MadLittleMods I also noticed that it was not aligned properly on master for IE. Can you also check to make sure this MR fixes IE?

@MadLittleMods I looked into your changes a little more and I think it could be improved

I did some changes locally and this seemed to work better:

diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index e1ebe01..3fe2359 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -246,23 +246,10 @@
   }
 }
 
-.filtered-search-history-dropdown-wrapper {
-  position: initial;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-}
-
 .filtered-search-history-dropdown-toggle-button {
-  flex: 1;
   width: auto;
-  height: 100%;
-  padding-top: 0;
-  padding-left: 0.75em;
-  padding-bottom: 0;
-  padding-right: 0.5em;
+  padding-right: 10px;
 
-  background-color: transparent;
   border-radius: 0;
   border-top: 0;
   border-left: 0;
@@ -270,7 +257,6 @@
   border-right: 1px solid $border-color;
 
   color: $gl-text-color-secondary;
-  line-height: 1;
 
   transition: color 0.1s linear;
 
@@ -283,7 +269,6 @@
 
   .dropdown-toggle-text {
     display: inline-block;
-    vertical-align: middle;
     color: inherit;
 
     .fa {

Can you see if this works for you?

assigned to @MadLittleMods

added 1 commit

• ae5c16f7 - Fix recent searches icon alignment in Safari

Compare with previous version

@ClemMakesApps That snippet doesn't quite work because the button isn't full-height of the container and the dropdown is squished.

I worked from your stripped down base and was able to get something going. Things are fixed up in Chrome, Firefox, Safari, IE 11, Edge.

assigned to @ClemMakesApps

resolved all discussions

LGTM, thanks @MadLittleMods

approved this merge request

merged

mentioned in commit d7a52716

Thanks @ClemMakesApps for close inspection 👀

Picked into 9-1-stable, will go into 9.1.0-rc2

mentioned in commit c9fb9572