Fix protruded infomation board section in about/more page (#4415)

* Fix protruded infomation board section

Set "flexwrap: wrap" for sections. Set upper and lower padding for each section, and adjust clearances around sections accordingly. Settings for viewport threshold 500px is no more needed.

* Fix mistake of reducing information-board padding

In according with this fix, additional padding setting  for maximum 840px width is no more needed.

1 files changed, 4 insertions, 15 deletions

diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss
index 10c9a55ff..ea01e7da1 100644
--- a/app/javascript/styles/about.scss
+++ b/app/javascript/styles/about.scss
@@ -121,7 +121,7 @@
 
 .information-board {
   background: darken($ui-base-color, 4%);
-  padding: 40px 0;
+  padding: 20px 0;
 
   .panel {
     position: absolute;
@@ -162,13 +162,14 @@
   .information-board-sections {
     display: flex;
     justify-content: space-between;
+    flex-wrap: wrap;
   }
 
   .section {
     flex: 1 0 0;
     font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
     text-align: right;
-    padding: 0 15px;
+    padding: 10px 15px;
 
     span,
     strong {
@@ -190,14 +191,6 @@
       color: $primary-text-color;
     }
   }
-
-  @media screen and (max-width: 500px) {
-    flex-direction: column;
-
-    .section {
-      text-align: left;
-    }
-  }
 }
 
 .owner {
@@ -661,16 +654,12 @@
       padding: 0 20px;
     }
 
-    .information-board {
-      padding-bottom: 20px;
-    }
-
     .information-board .container {
       padding-right: 20px;
 
       .panel {
         position: static;
-        margin-top: 30px;
+        margin-top: 20px;
         width: 100%;
         border-radius: 4px;