Make width breakpoint for removing margins consistent and match upstream

Fixes #1136

diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index b354e7acff34c89c804f6d1692886b3942fd2adc..7f3c2116319676139a2f89ea3b9cf5a8ffb04261 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -43,7 +43,7 @@
       display: flex;
       flex-direction: column;
 
-      @media screen and (min-width: 360px) {
+      @media screen and (min-width: $no-gap-breakpoint) {
         padding: 0 10px;
       }
     }
@@ -466,14 +466,14 @@
 }
 
 .auto-columns.navbar-under {
-  @media screen and (max-width: 360px) {
+  @media screen and (max-width: $no-gap-breakpoint) {
     @include fix-margins-for-navbar-under;
   }
 }
 
 .auto-columns.navbar-under .react-swipeable-view-container .columns-area,
 .single-column.navbar-under .react-swipeable-view-container .columns-area {
-  @media screen and (max-width: 360px) {
+  @media screen and (max-width: $no-gap-breakpoint) {
     height: 100% !important;
   }
 }

diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 0994a9b43deb5228dc58315c54ee9b0d9262d802..93a3f62ed32a5d2c6d0d38a56598e506c464b638 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -78,7 +78,7 @@
   margin-bottom: 10px;
   flex: none;
 
-  @include limited-single-column('screen and (max-width: 360px)') { margin-bottom: 0 }
+  @include limited-single-column('screen and (max-width: #{$no-gap-breakpoint})') { margin-bottom: 0 }
   @include single-column('screen and (max-width: 630px)') { font-size: 16px }
 }
 

diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index e0f3d62a7d43fde98f8758b7620bbc7bba2f5314..83c5d351b3df686d7701821bc5519253f58d507b 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -98,7 +98,7 @@
     top: 15px;
   }
 
-  @media screen and (min-width: 360px) {
+  @media screen and (min-width: $no-gap-breakpoint) {
     padding: 10px 0;
   }
 
@@ -184,7 +184,7 @@
   }
 }
 
-@media screen and (min-width: 360px) {
+@media screen and (min-width: $no-gap-breakpoint) {
   .tabs-bar {
     margin: 10px auto;
     margin-bottom: 0;