consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix advanced search button on large screens

Browse Source 
Since we were using `position: absolute` to position the button to the
right, we were assuming there was enough screen space on the left so
other elements (mainly, order selector links) could be there.

However, that wasn't always the case. In some languages, the texts
appearing on the left of the button were much larger than in English,
meaning their text and the button text could overlap. Even in English,
users could experience the same issue depending on their font size
preferences and the size of their screens.

The easiest solution is to move the button to its own line, so its text
doesn't overlap.
This commit is contained in:
Javi Martín
2021-06-29 00:38:43 +02:00
parent a2f6e03516
commit 16401dafdb
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/stylesheets/advanced_search.scss
View File

@@ -1,6 +1,7 @@
.advanced-search-form { .advanced-search-form {
@include grid-row-nest; @include grid-row-nest;
position: relative; display: flex;
flex-direction: column;
@include breakpoint(large) { @include breakpoint(large) {
.filter { .filter {
@@ -32,13 +33,12 @@
cursor: pointer; cursor: pointer;
margin-top: $line-height; margin-top: $line-height;
margin-bottom: $line-height; margin-bottom: $line-height;
max-width: max-content;
@include breakpoint(medium) { @include breakpoint(medium) {
float: right; align-self: flex-end;
margin-bottom: 0; margin-bottom: 0;
margin-top: $line-height / 4; margin-top: $line-height / 4;
position: absolute;
right: 0;
} }
&:focus { &:focus {