Skip to content

Commit

Permalink
Fix search bar buttons on very small screens (#1243)
Browse files Browse the repository at this point in the history
Fix the search bar styling so that the buttons don't disappear on small screens

On screens with very small widths (<350px width), the search bar clear and search buttons shrink and eventually disappear as the screen width decreases. This PR prevents the buttons from shrinking and disappearing on very small screens.

J=SLAP-999
TEST=visual

Build a site and view it at various sizes between 300px and 400px wide and confirm that the search bar buttons no longer shrink or disappear. Test on a browswerstack iphone 8 with safare and on a windows laptop on IE11.
  • Loading branch information
cea2aj committed Mar 5, 2021
1 parent 48bbf24 commit 2c7869f
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion src/ui/sass/modules/_SearchBar.scss
Expand Up @@ -86,7 +86,7 @@ $searchbar-button-text-color-active: var(--yxt-searchbar-button-text-color-base)
border: none;

background-color: transparent;
flex-grow: 1;
width: 100%;
padding-top: calc(var(--yxt-base-spacing) / 2);
padding-bottom: calc(var(--yxt-base-spacing) / 2);
padding-left: var(--yxt-base-spacing);
Expand Down Expand Up @@ -121,6 +121,7 @@ $searchbar-button-text-color-active: var(--yxt-searchbar-button-text-color-base)
&-clear
{
display: flex;
flex-shrink: 0;
align-items: center;
font: inherit;
padding-top: calc(var(--yxt-base-spacing) / 2);
Expand Down

0 comments on commit 2c7869f

Please sign in to comment.