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.

app/assets/stylesheets/common/base/crawler_layout.scss

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