From 8a3c02c985f840fb6afbaf6907fa4330502ac1f3 Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Wed, 13 Jul 2022 11:59:16 +0800
Subject: [PATCH] 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">
---
 app/assets/stylesheets/common/base/crawler_layout.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/assets/stylesheets/common/base/crawler_layout.scss b/app/assets/stylesheets/common/base/crawler_layout.scss
index b8decdacd46..a9deaf7f624 100644
--- a/app/assets/stylesheets/common/base/crawler_layout.scss
+++ b/app/assets/stylesheets/common/base/crawler_layout.scss
@@ -144,6 +144,8 @@ body > noscript {
   div#main-outlet {
     div.post {
       word-break: break-word;
+      overflow: auto;
+      max-width: 100%;
       img {
         max-width: 100%;
         height: auto;
@@ -195,6 +197,12 @@ body > noscript {
     }
   }
 
+  .tag-crawler {
+    .tag-box {
+      margin-bottom: 0.5em;
+    }
+  }
+
   #topic-title {
     > * {
       display: block;