Fix: Search box doesn't fit in overlays on mobile using MediaQuery Tag

[KSSaiTeja]

Fixes: #2369

Changes:

I have used <MediaQuery> tag to fix the issue

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[KSSaiTeja]

@lindapaiste please review my PR.

[lindapaiste]

Please run this command and push the changes.

git revert 8c8dfa16c4ad9ddb7d9522ee9add70de9d5d6363

That will remove the unrelated changes to CollectionListRow.

When you start a new branch for a PR you want to start from upstream/develop and not include the code from your other branches. I know this git stuff can be a real headache.

[lindapaiste]

Let's a some left padding to this new CSS class. This will align it with the QuickAddWrapper.

.overlay__actions-mobile {
  padding-left: #{24/ $base-font-size}rem;
}

(I know I said in the issue not to worry about padding, but seeing it in action...I've changed my mind 😝)

[KSSaiTeja]

so do you want me run git revert 8c8dfa16c4ad9ddb7d9522ee9add70de9d5d6363 and push again..?

[KSSaiTeja]

or else do i need to do any changes?

[KSSaiTeja]

@lindapaiste hope this will not bother you.. i reverted other branch commit for this.. pushed again. please review it in your freetime and let me know if any other changes required

[raclim]

Thanks for your work on this! Due to the amount of time that's passed since this pull request was opened, I'm going to close this for now. I'm sorry that we ended up not being able to merge this in, but please feel free to reopen a new pull request for this issue!