[Glitch] Add single-column mode

Port 9ddeb30f90f9402eb567c88354d4956fcfdf0361 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

1 files changed, 4 insertions, 38 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 0bf01ed8d..50438393e 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -13,16 +13,6 @@
   position: relative;
 }
 
-@include limited-single-column('screen and (min-width: 360px)', $parent: null) {
-  .columns-area {
-    padding: 10px;
-  }
-
-  .react-swipeable-view-container .columns-area {
-    height: calc(100% - 20px) !important;
-  }
-}
-
 .react-swipeable-view-container {
   &,
   .columns-area,
@@ -63,34 +53,6 @@
   overflow: hidden;
 }
 
-@include limited-single-column('screen and (min-width: 360px)', $parent: null) {
-  .tabs-bar {
-    margin: 10px;
-    margin-bottom: 0;
-  }
-}
-
-:root {  //  Overrides .wide stylings for mobile view
-  @include single-column('screen and (max-width: 630px)', $parent: null) {
-    .column {
-      flex: auto;
-      width: 100%;
-      min-width: 0;
-      max-width: none;
-      padding: 0;
-    }
-
-    .columns-area {
-      flex-direction: column;
-    }
-
-    .search__input,
-    .autosuggest-textarea__textarea {
-      font-size: 16px;
-    }
-  }
-}
-
 @include multi-columns('screen and (min-width: 631px)', $parent: null) {
   .columns-area {
     padding: 0;
@@ -442,6 +404,10 @@
     contain: strict;
   }
 
+  & > span {
+    max-width: 400px;
+  }
+
   a {
     color: $highlight-text-color;
     text-decoration: none;