From fabfa90e6cf7e20b3bb81213a2a388e1386c9c04 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Thu, 18 Jul 2019 14:32:45 +0200
Subject: Make width breakpoint for removing margins consistent and match
 upstream

Fixes #1136
---
 app/javascript/flavours/glitch/styles/components/columns.scss       | 6 +++---
 app/javascript/flavours/glitch/styles/components/drawer.scss        | 2 +-
 app/javascript/flavours/glitch/styles/components/single_column.scss | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'app/javascript/flavours/glitch')

diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index b354e7acf..7f3c21163 100644
--- 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 0994a9b43..93a3f62ed 100644
--- 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 e0f3d62a7..83c5d351b 100644
--- 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;
-- 
cgit