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

630px = Drawer + 1 Column

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;

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;
 

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;