Support overriding media queries for deciding between single-column/multi-column layouts with a class

app/javascript/mastodon/features/ui/index.js

@@ -179,7 +179,7 @@ export default class UI extends React.PureComponent {
     const { children } = this.props;
 
     return (
-      <div className='ui' ref={this.setRef}>
+      <div className='ui auto-columns' ref={this.setRef}>
         <TabsBar />
         <ColumnsAreaContainer singleColumn={isMobile(width)}>
           <WrappedSwitch>

app/javascript/styles/_mixins.scss

@@ -10,3 +10,25 @@
   height: $size;
   background-size: $size $size;
 }
+
+@mixin single-column($media, $parent: '&') {
+  .auto-columns #{$parent} {
+    @media #{$media} {
+      @content;
+    }
+  }
+  .single-column #{$parent} {
+    @content;
+  }
+}
+
+@mixin multi-columns($media, $parent: '&') {
+  .auto-columns #{$parent} {
+    @media #{$media} {
+      @content;
+    }
+  }
+  .multi-columns #{$parent} {
+    @content;
+  }
+}

app/javascript/styles/accounts.scss

@@ -9,7 +9,7 @@
   overflow: hidden;
   position: relative;
 
-  @media screen and (max-width: 700px) {
+  @include single-column('screen and (max-width: 700px)') {
     border-radius: 0;
     box-shadow: none;
   }
@@ -148,7 +148,7 @@
     order: 1;
   }
 
-  @media screen and (max-width: 480px) {
+  @include single-column('screen and (max-width: 480px)') {
     .details {
       display: block;
     }
@@ -230,7 +230,7 @@
     color: lighten($ui-base-color, 10%);
   }
 
-  @media screen and (max-width: 360px) {
+  @include single-column('screen and (max-width: 360px)') {
     padding: 30px 20px;
 
     a,
@@ -258,7 +258,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  @media screen and (max-width: 700px) {
+  @include single-column('screen and (max-width: 700px)') {
     border-radius: 0;
     box-shadow: none;
   }

app/javascript/styles/components.scss

@@ -1330,7 +1330,7 @@
   position: relative;
 }
 
-@media screen and (min-width: 360px) {
+@include multi-columns('screen and (min-width: 360px)', $parent: null) {
   .columns-area {
     padding: 10px;
   }
@@ -1386,7 +1386,7 @@
   }
 }
 
-@media screen and (min-width: 360px) {
+@include multi-columns('screen and (min-width: 360px)', $parent: null) {
   .tabs-bar {
     margin: 10px;
     margin-bottom: 0;
@@ -1397,7 +1397,7 @@
   }
 }
 
-@media screen and (max-width: 1024px) {
+@include single-column('screen and (max-width: 1024px)', $parent: null) {
   .column,
   .drawer {
     width: 100%;
@@ -1414,7 +1414,7 @@
   }
 }
 
-@media screen and (min-width: 1025px) {
+@include multi-columns('screen and (min-width: 1025px)', $parent: null) {
   .columns-area {
     padding: 0;
   }
@@ -1540,7 +1540,7 @@
   }
 }
 
-@media screen and (min-width: 600px) {
+@include multi-columns('screen and (min-width: 600px)', $parent: null) {
   .tabs-bar__link {
     span {
       display: inline;
@@ -1548,7 +1548,7 @@
   }
 }
 
-@media screen and (min-width: 1025px) {
+@include multi-columns('screen and (min-width: 1025px)', $parent: null) {
   .tabs-bar {
     display: none;
   }
@@ -1737,7 +1737,7 @@
   }
 
   &.hidden-on-mobile {
-    @media screen and (max-width: 1024px) {
+    @include single-column('screen and (max-width: 1024px)') {
       display: none;
     }
   }
@@ -2114,7 +2114,7 @@ button.icon-button.active i.fa-retweet {
   }
 
   &.hidden-on-mobile {
-    @media screen and (max-width: 1024px) {
+    @include single-column('screen and (max-width: 1024px)') {
       display: none;
     }
   }
@@ -3073,7 +3073,7 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-@media screen and (max-width: 550px) {
+@include single-column('screen and (max-width: 550px)', $parent: null) {
   .onboarding-modal {
     width: 100%;
     height: 100%;
@@ -3209,7 +3209,7 @@ button.icon-button.active i.fa-retweet {
   margin-right: 15px;
 }
 
-@media screen and (max-width: 400px) {
+@include single-column('screen and (max-width: 400px)', $parent: null) {
   .onboarding-modal__page-one {
     flex-direction: column;
   }
@@ -3284,7 +3284,7 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-@media screen and (max-width: 320px) and (max-height: 600px) {
+@include single-column('screen and (max-width: 320px) and (max-height: 600px)', $parent: null) {
   .onboarding-modal__page p {
     font-size: 14px;
     line-height: 20px;

app/javascript/styles/containers.scss

@@ -3,7 +3,7 @@
   margin: 0 auto;
   margin-top: 40px;
 
-  @media screen and (max-width: 700px) {
+  @include single-column('screen and (max-width: 700px)') {
     width: 100%;
     margin: 0;
   }
@@ -15,7 +15,7 @@
   margin-bottom: 0;
   cursor: default;
 
-  @media screen and (max-width: 360px) {
+  @include single-column('screen and (max-width: 360px)') {
     margin: 30px auto;
   }
 

app/javascript/styles/custom.scss

@@ -1,6 +1,6 @@
 @import 'application';
 
-@media screen and (min-width: 1300px) { 
+@include multi-columns('screen and (min-width: 1300px)', $parent: null) {
   .column {
     flex-grow: 1 !important;
     max-width: 400px;