Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Mobile usability issues in crawler view (#17465) 

Google is complaining about some mobile crawler layout issues. If a post has tables, they extend outside the viewport.

<img height="300" src="https://user-images.githubusercontent.com/33972521/178642976-3d1761ad-d8cb-4c69-92b5-7be799873d5c.png">

This PR fixes that. We constrain the post to the viewport width (already determined from a parent element) and make it possible to scroll instead. 

There is no visual change here, it should act the same as it does today, but it makes Google happy.

This PR also adds a bit of margin to tags in the `/tags` page in the crawler view because Google was complaining about `Clickable elements too close together`

<img height="300" src="https://user-images.githubusercontent.com/33972521/178644327-cc3ff795-24f1-4fef-95c9-e4358a5b37bc.png">
This commit is contained in:
Joe 2022-07-13 11:59:16 +08:00 committed by GitHub
parent fa5f3e228c
commit 8a3c02c985
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/stylesheets/common/base/crawler_layout.scss
View File

@ -144,6 +144,8 @@ body > noscript {
div#main-outlet { div#main-outlet {
div.post { div.post {
word-break: break-word; word-break: break-word;
overflow: auto;
max-width: 100%;
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
@ -195,6 +197,12 @@ body > noscript {
} }
} }
.tag-crawler {
.tag-box {
margin-bottom: 0.5em;
}
}
#topic-title { #topic-title {
> * { > * {
display: block; display: block;