Fix style bugs on article-show and article-new (#6762) [deploy]

app/assets/stylesheets/article-show.scss

@@ -191,13 +191,13 @@ article {
     }
 
     h3 {
-      margin: 4px auto;
+      margin: 2px auto;
       padding: 0;
       padding: 0 3px 16px;
       font-weight: 500;
       @include themeable(color, theme-secondary-color, $medium-gray);
       font-size: 13.5px;
-      line-height: 1.5em;
+      line-height: 1.8em;
 
       @media screen and (min-width: 430px) {
         font-size: 15px;
@@ -241,9 +241,9 @@ article {
       }
 
       .action-space {
-        padding: 5px 0 0 0;
+        padding: 0 0 0 0;
         display: inline-flex;
-
+        min-width: 44px;
         a {
           display: inline-block;
           background: $green;
@@ -255,7 +255,7 @@ article {
           font-stretch: condensed;
           margin-right: 4px;
           @media screen and (max-width: 376px) {
-            padding: 2px 3px 3px;
+            padding: 2px 6px 3px;
             margin-left: 3px;
             margin-left: 5px;
 
@@ -368,7 +368,7 @@ article {
     @include themeable(background, theme-container-background, #fff);
     position: relative;
     z-index: 5;
-    padding-bottom: 5px;
+    padding: 5px 0px;
     overflow-wrap: break-word;
 
     a {
@@ -393,13 +393,14 @@ article {
     h5,
     h6 {
       font-family: $helvetica;
+      margin: 0.3em auto;
+      padding-left: 4px;
+      padding-right: 4px;
     }
 
     h1 {
       font-size: 1.85em;
       line-height: 1.14em;
-      padding-left: 4px;
-      padding-right: 4px;
       font-weight: 400;
     }
 
@@ -407,8 +408,6 @@ article {
       font-size: 1.7em;
       font-weight: 400;
       line-height: 1.14em;
-      padding-left: 6px;
-      padding-right: 6px;
       padding-bottom: 0;
       margin-bottom: 0.5em;
     }
@@ -416,23 +415,6 @@ article {
     h3 {
       font-size: 1.32em;
       font-weight: 400;
-      padding-left: 6px;
-      padding-right: 6px;
-    }
-
-    h4 {
-      padding-left: 6px;
-      padding-right: 6px;
-    }
-
-    h5 {
-      padding-left: 6px;
-      padding-right: 6px;
-    }
-
-    h6 {
-      padding-left: 6px;
-      padding-right: 6px;
     }
 
     hr {

app/assets/stylesheets/preact/article-form.scss

@@ -531,8 +531,8 @@
     color: var(--theme-secondary-color, $medium-gray);
     white-space: nowrap;
     @media screen and (min-width: 430px) {
-      margin-top: 16px;
-      margin-bottom: 16px;
+      margin-top: 23px;
+      margin-bottom: 8px;
     }
     &:hover {
       background: lighten($green, 24%);

app/views/articles/show.html.erb

@@ -156,7 +156,7 @@
             </span>
           <% end %>
           <span class="published-at">・<%= @article.reading_time < 1 ? 1 : @article.reading_time %> min read</span>
-          <span class="action-space" id="action-space"></span>
+          <span class="action-space" id="action-space">&nbsp;</span>
         </h3>
         <% cache("main-article-tags-#{@article.cached_tag_list}", expires_in: 30.hours) do %>
           <div class="tags">