improve displaying of search results on small screens #923
Conversation
|
✔️ Deploy Preview for developer-chrome-com ready! 🔨 Explore the source changes: 155b299 🔍 Inspect the deploy log: https://app.netlify.com/sites/developer-chrome-com/deploys/60f8db663c91f500079039df 😎 Browse the preview: https://deploy-preview-923--developer-chrome-com.netlify.app |
|
I think there might be a couple of issues. If you type "qq" into the search box, it should show you the what's new in chrome post. On desktop, the thumbnail is pushed offscreen to the right, but it should be next to the text. On mobile, the thumbnail is centered underneath the text, but it should either be to the right of the text, or, if there's not enough room, we should consider hiding the thumbnail on mobile. |
|
PTAL |
| @@ -103,12 +103,15 @@ search-box[active] { | |||
|
|
|||
| .search-box__snippet { | |||
| color: var(--color-secondary-text); | |||
| word-break: break-all; | |||
There was a problem hiding this comment.
You can remove this. Otherwise it causes words to wrap in strange ways like breaking at the last letter. The words seem to wrap correctly now with the margin that you added.
| } | ||
|
|
||
| .search-box__thumbnail { | ||
| margin-left: get-size(200); | ||
| display: none; | ||
| margin: get-size(300) auto 0 auto; |
There was a problem hiding this comment.
should the margin be 0 if you're hiding the thumbnail?
Co-authored-by: Rob Dodson <robdodson@users.noreply.github.com>
Co-authored-by: Rob Dodson <robdodson@users.noreply.github.com>
|
I fixed this in #1148. |
Fixes #917