diff options
-rw-r--r-- | app/javascript/mastodon/is_mobile.js | 2 | ||||
-rw-r--r-- | app/javascript/styles/components.scss | 12 | ||||
-rw-r--r-- | app/javascript/styles/rtl.scss | 2 |
3 files changed, 8 insertions, 8 deletions
diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js index dbdb30081..f96df1ebb 100644 --- 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 62c9b0066..b6cf920b4 100644 --- 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 6c003d69a..0fdeccd9c 100644 --- 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; |