Change mobile layout breakpoint from 1024px to 630px (#5063)

630px = Drawer + 1 Column

diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js
index dbdb30081dba0979a7494a3929cbb3e331c2d038..f96df1ebbc6705956b19413fa11ca9437e02e9f4 100644 (file)
--- a/app/javascript/mastodon/is_mobile.js
+++ b/app/javascript/mastodon/is_mobile.js
@@ -1,6 +1,6 @@
 import detectPassiveEvents from 'detect-passive-events';
 
-const LAYOUT_BREAKPOINT = 1024;
+const LAYOUT_BREAKPOINT = 630;
 
 export function isMobile(width) {
   return width <= LAYOUT_BREAKPOINT;

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 62c9b0066bd67e6eabf416a8b06cce251bcce252..b6cf920b4f2d2794a1ed30f61876a5dc9c1f0807 100644 (file)
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -222,7 +222,7 @@
 }
 
 .dropdown--active::after {
-  @media screen and (min-width: 1025px) {
+  @media screen and (min-width: 631px) {
     content: "";
     display: block;
     position: absolute;
@@ -1474,7 +1474,7 @@
   }
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 630px) {
   .column,
   .drawer {
     width: 100%;
@@ -1491,7 +1491,7 @@
   }
 }
 
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 631px) {
   .columns-area {
     padding: 0;
   }
@@ -1605,7 +1605,7 @@
   &:hover,
   &:focus,
   &:active {
-    @media screen and (min-width: 1025px) {
+    @media screen and (min-width: 631px) {
       background: lighten($ui-base-color, 14%);
       transition: all 100ms linear;
     }
@@ -1625,7 +1625,7 @@
   }
 }
 
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 631px) {
   .tabs-bar {
     display: none;
   }
@@ -4037,7 +4037,7 @@ noscript {
   100% { opacity: 1; }
 }
 
-@media screen and (max-width: 1024px) and (max-height: 400px) {
+@media screen and (max-width: 630px) and (max-height: 400px) {
   $duration: 400ms;
   $delay: 100ms;
 

diff --git a/app/javascript/styles/rtl.scss b/app/javascript/styles/rtl.scss
index 6c003d69ad9fe9f4662be6de64da368fb9449fd0..0fdeccd9c31524a8e13d9e5713d44cc62718ec93 100644 (file)
--- a/app/javascript/styles/rtl.scss
+++ b/app/javascript/styles/rtl.scss
@@ -245,7 +245,7 @@ body.rtl {
     margin-left: 30px;
   }
 
-  @media screen and (min-width: 1025px) {
+  @media screen and (min-width: 631px) {
     .column,
     .drawer {
       padding-left: 5px;