Fix layout scrolling annoyances in Chrome mobile

themes/zenn/sass/_applause.scss

@@ -1,8 +1,15 @@
 /**
  * Applause button, move to center of page.
  */
+
+.applause-wrapper {
+    font-family: $font-main;
+    overflow: hidden;
+    margin: 0 auto;
+}
+
 applause-button {
     width: 3em;
     height: 3em;
-    margin: 2.5em auto 1.5em;
+    margin: 2.5em auto 2em;
 }

themes/zenn/sass/_layout.scss

@@ -9,7 +9,6 @@ main {
     color: $color-text;
     border: 1px solid $color-main-border;
     box-shadow: 0 0 10px 5px rgba($color-main-border, 0.4);
-    overflow: auto;
 }
 
 content {
@@ -17,6 +16,8 @@ content {
     padding: 2.5em 3em;
     background: $color-main-bg;
     flex: 1;
+    overflow-x: auto;
+    overflow-y: visible;
 
     #{headings(1,6,"header >")} {
         margin: 0;

themes/zenn/templates/page.html

@@ -18,7 +18,9 @@
         </div>
 
         {% if page.extra.zenn_applause %}
-            <applause-button color="#a6a28c"></applause-button>
+            <div class="applause-wrapper">
+                <applause-button color="#a6a28c"></applause-button>
+            </div>
         {% endif %}
     </article>
 {% endblock body %}