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

FIX: crawler layout CSS adjustments (#7469) 

* Fix header size to fit the viewport

Setting the header to border-box means that the padding is factored in when calculating its width. If this is not done, the header width would be 100% of the viewport width + any padding when set on it. That causes some parts of the header to be rendered off-screen and causes horizontal scrolling.

* prevent code in posts from causing horizontal overflow

We are currently not wrapping code in posts in the crawler view. This affects both unformatted code and inline code blocks. This commit forces such code to wrap in order to prevent horizontal overflow which the Google bot complains about since it causes some content to be rendered outside of the viewport for the mobile crawler.
This commit is contained in:
Joe 2019-05-02 13:00:29 +08:00 committed by GitHub
parent 157dc5e298
commit 5a834a05ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ body.crawler {
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;
box-shadow: shadow("header"); box-shadow: shadow("header");
box-sizing: border-box;
} }
div.topic-list div[itemprop="itemListElement"] { div.topic-list div[itemprop="itemListElement"] {
padding: 10px 0; padding: 10px 0;
@ -17,6 +18,7 @@ body.crawler {
} }
div#main-outlet { div#main-outlet {
div.post { div.post {
word-break: break-word;
img { img {
max-width: 100%; max-width: 100%;
} }