From a70468aa562e51c3dd0d4a7505f4163e3572ea13 Mon Sep 17 00:00:00 2001
From: Surinna Curtis <ekiru.0@gmail.com>
Date: Sat, 24 Jun 2017 13:18:54 -0500
Subject: [PATCH 1/8] Support overriding media queries for deciding between
 single-column/multi-column layouts with a class

---
 app/javascript/mastodon/features/ui/index.js |  2 +-
 app/javascript/styles/_mixins.scss           | 22 ++++++++++++++++++++
 app/javascript/styles/accounts.scss          |  8 +++----
 app/javascript/styles/components.scss        | 22 ++++++++++----------
 app/javascript/styles/containers.scss        |  4 ++--
 app/javascript/styles/custom.scss            |  2 +-
 6 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 8453679b05..f3a8bebe91 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/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>
diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss
index 455062135a..76302af99c 100644
--- a/app/javascript/styles/_mixins.scss
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss
index 10f8bd2b9c..815f8b94fc 100644
--- a/app/javascript/styles/accounts.scss
+++ b/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;
   }
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 025ef2f64b..e204f36374 100644
--- a/app/javascript/styles/components.scss
+++ b/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;
diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss
index 68f73e0c05..34d6cbc69b 100644
--- a/app/javascript/styles/containers.scss
+++ b/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;
   }
 
diff --git a/app/javascript/styles/custom.scss b/app/javascript/styles/custom.scss
index b032311020..7a0509842c 100644
--- a/app/javascript/styles/custom.scss
+++ b/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;

From ceb545c08002ed34f8837ddd2fd032178f59c6ed Mon Sep 17 00:00:00 2001
From: Surinna Curtis <ekiru.0@gmail.com>
Date: Sat, 24 Jun 2017 14:22:55 -0500
Subject: [PATCH 2/8] Pass in correct "singleColumn" prop value when
 auto-columns is not used.

---
 app/javascript/mastodon/features/ui/index.js | 15 +++++++++++++--
 app/javascript/mastodon/is_mobile.js         | 11 +++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index f3a8bebe91..a372deac57 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -74,6 +74,15 @@ class WrappedRoute extends React.Component {
 
 }
 
+function columnClass(columns) {
+  switch (columns) {
+    case "auto": return "auto-columns";
+    case "single": return "single-column";
+    case "multiple": return "multi-columns";
+    default: return "auto-columns";
+  }
+}
+
 @connect()
 export default class UI extends React.PureComponent {
 
@@ -178,10 +187,12 @@ export default class UI extends React.PureComponent {
     const { width, draggingOver } = this.state;
     const { children } = this.props;
 
+    const columns = "auto";
+
     return (
-      <div className='ui auto-columns' ref={this.setRef}>
+      <div className={'ui ' + columnClass(columns)} ref={this.setRef}>
         <TabsBar />
-        <ColumnsAreaContainer singleColumn={isMobile(width)}>
+        <ColumnsAreaContainer singleColumn={isMobile(width, columns)}>
           <WrappedSwitch>
             <Redirect from='/' to='/getting-started' exact />
             <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js
index 992e63727a..8689dbe23d 100644
--- a/app/javascript/mastodon/is_mobile.js
+++ b/app/javascript/mastodon/is_mobile.js
@@ -1,7 +1,14 @@
 const LAYOUT_BREAKPOINT = 1024;
 
-export function isMobile(width) {
-  return width <= LAYOUT_BREAKPOINT;
+export function isMobile(width, columns) {
+  switch (columns) {
+  case "multiple":
+    return false;
+  case "single":
+    return true;
+  default:
+    return width <= LAYOUT_BREAKPOINT;
+  }
 };
 
 const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

From ddba5d3b8c065cdf1ef206b13fea02444ffdf1f7 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Sat, 24 Jun 2017 17:07:25 -0700
Subject: [PATCH 3/8] Use Redux store to keep track of layout

---
 .../mastodon/containers/mastodon.js           |  1 +
 app/javascript/mastodon/features/ui/index.js  | 31 +++++++++++--------
 app/javascript/mastodon/is_mobile.js          |  4 +--
 app/javascript/mastodon/reducers/settings.js  |  1 +
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js
index 3bd89902f6..f66110520b 100644
--- a/app/javascript/mastodon/containers/mastodon.js
+++ b/app/javascript/mastodon/containers/mastodon.js
@@ -24,6 +24,7 @@ addLocaleData(localeData);
 
 const store = configureStore();
 const initialState = JSON.parse(document.getElementById('initial-state').textContent);
+if (localStorage) initialState.layout = localStorage.getItem('mastodon-layout');
 store.dispatch(hydrateStore(initialState));
 
 export default class Mastodon extends React.PureComponent {
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index a372deac57..f8c10f9a30 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -74,21 +74,17 @@ class WrappedRoute extends React.Component {
 
 }
 
-function columnClass(columns) {
-  switch (columns) {
-    case "auto": return "auto-columns";
-    case "single": return "single-column";
-    case "multiple": return "multi-columns";
-    default: return "auto-columns";
-  }
-}
+const mapStateToProps = state => ({
+  layout: state.getIn(['settings', 'layout']),
+});
 
-@connect()
+@connect(mapStateToProps)
 export default class UI extends React.PureComponent {
 
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     children: PropTypes.node,
+    layout: PropTypes.string,
   };
 
   state = {
@@ -184,15 +180,24 @@ export default class UI extends React.PureComponent {
   }
 
   render () {
-    const { width, draggingOver } = this.state;
+    const { width, draggingOver, layout } = this.state;
     const { children } = this.props;
 
-    const columns = "auto";
+    const columnsClass = layout => {
+      switch (layout) {
+      case 'single':
+        return 'single-column';
+      case 'multiple':
+        return 'multiple-columns';
+      default:
+        return 'auto-columns';
+      }
+    }
 
     return (
-      <div className={'ui ' + columnClass(columns)} ref={this.setRef}>
+      <div className={'ui ' + columnsClass(layout)} ref={this.setRef}>
         <TabsBar />
-        <ColumnsAreaContainer singleColumn={isMobile(width, columns)}>
+        <ColumnsAreaContainer singleColumn={isMobile(width, layout)}>
           <WrappedSwitch>
             <Redirect from='/' to='/getting-started' exact />
             <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js
index 8689dbe23d..014a9a8d5f 100644
--- a/app/javascript/mastodon/is_mobile.js
+++ b/app/javascript/mastodon/is_mobile.js
@@ -2,9 +2,9 @@ const LAYOUT_BREAKPOINT = 1024;
 
 export function isMobile(width, columns) {
   switch (columns) {
-  case "multiple":
+  case 'multiple':
     return false;
-  case "single":
+  case 'single':
     return true;
   default:
     return width <= LAYOUT_BREAKPOINT;
diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js
index ddad7a4fc2..9a15a1fe30 100644
--- a/app/javascript/mastodon/reducers/settings.js
+++ b/app/javascript/mastodon/reducers/settings.js
@@ -6,6 +6,7 @@ import uuid from '../uuid';
 
 const initialState = Immutable.Map({
   onboarded: false,
+  layout: 'auto',
 
   home: Immutable.Map({
     shows: Immutable.Map({

From 4c37f629bce6fede13b6105749a10e585fb9c3b0 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Sat, 24 Jun 2017 18:30:59 -0700
Subject: [PATCH 4/8] Don't change layout of static pages

---
 app/javascript/styles/accounts.scss   | 8 ++++----
 app/javascript/styles/containers.scss | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss
index 815f8b94fc..10f8bd2b9c 100644
--- a/app/javascript/styles/accounts.scss
+++ b/app/javascript/styles/accounts.scss
@@ -9,7 +9,7 @@
   overflow: hidden;
   position: relative;
 
-  @include single-column('screen and (max-width: 700px)') {
+  @media screen and (max-width: 700px) {
     border-radius: 0;
     box-shadow: none;
   }
@@ -148,7 +148,7 @@
     order: 1;
   }
 
-  @include single-column('screen and (max-width: 480px)') {
+  @media screen and (max-width: 480px) {
     .details {
       display: block;
     }
@@ -230,7 +230,7 @@
     color: lighten($ui-base-color, 10%);
   }
 
-  @include single-column('screen and (max-width: 360px)') {
+  @media screen and (max-width: 360px) {
     padding: 30px 20px;
 
     a,
@@ -258,7 +258,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  @include single-column('screen and (max-width: 700px)') {
+  @media screen and (max-width: 700px) {
     border-radius: 0;
     box-shadow: none;
   }
diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss
index 34d6cbc69b..68f73e0c05 100644
--- a/app/javascript/styles/containers.scss
+++ b/app/javascript/styles/containers.scss
@@ -3,7 +3,7 @@
   margin: 0 auto;
   margin-top: 40px;
 
-  @include single-column('screen and (max-width: 700px)') {
+  @media screen and (max-width: 700px) {
     width: 100%;
     margin: 0;
   }
@@ -15,7 +15,7 @@
   margin-bottom: 0;
   cursor: default;
 
-  @include single-column('screen and (max-width: 360px)') {
+  @media screen and (max-width: 360px) {
     margin: 30px auto;
   }
 

From da05cde72108e4caf3a053d3dd949d97fe8ff711 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Sat, 24 Jun 2017 19:12:34 -0700
Subject: [PATCH 5/8] Better settings handling with localSettings (new!)

---
 .../mastodon/actions/local_settings.js        | 20 +++++++++++++++++++
 .../mastodon/containers/mastodon.js           |  6 +++++-
 app/javascript/mastodon/features/ui/index.js  | 10 +++++-----
 app/javascript/mastodon/reducers/index.js     |  2 ++
 .../mastodon/reducers/local_settings.js       | 20 +++++++++++++++++++
 5 files changed, 52 insertions(+), 6 deletions(-)
 create mode 100644 app/javascript/mastodon/actions/local_settings.js
 create mode 100644 app/javascript/mastodon/reducers/local_settings.js

diff --git a/app/javascript/mastodon/actions/local_settings.js b/app/javascript/mastodon/actions/local_settings.js
new file mode 100644
index 0000000000..742a1eec2c
--- /dev/null
+++ b/app/javascript/mastodon/actions/local_settings.js
@@ -0,0 +1,20 @@
+export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE';
+
+export function changeLocalSetting(key, value) {
+  return dispatch => {
+    dispatch({
+      type: LOCAL_SETTING_CHANGE,
+      key,
+      value,
+    });
+
+    dispatch(saveLocalSettings());
+  };
+};
+
+export function saveLocalSettings() {
+  return (_, getState) => {
+    const localSettings = getState().get('localSettings').toJS();
+    localStorage.setItem('mastodon-settings', JSON.stringify(localSettings));
+  };
+};
diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js
index f66110520b..3468a79448 100644
--- a/app/javascript/mastodon/containers/mastodon.js
+++ b/app/javascript/mastodon/containers/mastodon.js
@@ -24,7 +24,11 @@ addLocaleData(localeData);
 
 const store = configureStore();
 const initialState = JSON.parse(document.getElementById('initial-state').textContent);
-if (localStorage) initialState.layout = localStorage.getItem('mastodon-layout');
+try {
+  initialState.localSettings = JSON.parse(localStorage.getItem('mastodon-settings'));
+} catch (e) {
+  initialState.localSettings = {};
+}
 store.dispatch(hydrateStore(initialState));
 
 export default class Mastodon extends React.PureComponent {
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index f8c10f9a30..e5915ffe05 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -75,7 +75,7 @@ class WrappedRoute extends React.Component {
 }
 
 const mapStateToProps = state => ({
-  layout: state.getIn(['settings', 'layout']),
+  layout: state.getIn(['localSettings', 'layout']),
 });
 
 @connect(mapStateToProps)
@@ -180,19 +180,19 @@ export default class UI extends React.PureComponent {
   }
 
   render () {
-    const { width, draggingOver, layout } = this.state;
-    const { children } = this.props;
+    const { width, draggingOver } = this.state;
+    const { children, layout } = this.props;
 
     const columnsClass = layout => {
       switch (layout) {
       case 'single':
         return 'single-column';
       case 'multiple':
-        return 'multiple-columns';
+        return 'multi-columns';
       default:
         return 'auto-columns';
       }
-    }
+    };
 
     return (
       <div className={'ui ' + columnsClass(layout)} ref={this.setRef}>
diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js
index be402a16b1..24f7f94a6d 100644
--- a/app/javascript/mastodon/reducers/index.js
+++ b/app/javascript/mastodon/reducers/index.js
@@ -14,6 +14,7 @@ import relationships from './relationships';
 import search from './search';
 import notifications from './notifications';
 import settings from './settings';
+import localSettings from './local_settings';
 import status_lists from './status_lists';
 import cards from './cards';
 import reports from './reports';
@@ -36,6 +37,7 @@ export default combineReducers({
   search,
   notifications,
   settings,
+  localSettings,
   cards,
   reports,
   contexts,
diff --git a/app/javascript/mastodon/reducers/local_settings.js b/app/javascript/mastodon/reducers/local_settings.js
new file mode 100644
index 0000000000..529d31ebba
--- /dev/null
+++ b/app/javascript/mastodon/reducers/local_settings.js
@@ -0,0 +1,20 @@
+import { LOCAL_SETTING_CHANGE } from '../actions/local_settings';
+import { STORE_HYDRATE } from '../actions/store';
+import Immutable from 'immutable';
+
+const initialState = Immutable.Map({
+  layout: 'auto',
+});
+
+const hydrate = (state, localSettings) => state.mergeDeep(localSettings);
+
+export default function localSettings(state = initialState, action) {
+  switch(action.type) {
+  case STORE_HYDRATE:
+    return hydrate(state, action.state.get('localSettings'));
+  case LOCAL_SETTING_CHANGE:
+    return state.setIn(action.key, action.value);
+  default:
+    return state;
+  }
+};

From ca0d30c04b96a87deed0e2da824212e2d644eb91 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Sat, 24 Jun 2017 20:04:46 -0700
Subject: [PATCH 6/8] OKAY THIS WORKS THIS WORKS

---
 .../mastodon/features/compose/index.js        | 57 ++++++++++++++++++-
 .../mastodon/locales/defaultMessages.json     | 16 ++++++
 app/javascript/mastodon/locales/en.json       |  4 ++
 app/javascript/styles/components.scss         | 33 ++++++++---
 4 files changed, 100 insertions(+), 10 deletions(-)

diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js
index 747fe42164..5121671935 100644
--- a/app/javascript/mastodon/features/compose/index.js
+++ b/app/javascript/mastodon/features/compose/index.js
@@ -4,8 +4,9 @@ import NavigationContainer from './containers/navigation_container';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { mountCompose, unmountCompose } from '../../actions/compose';
+import { changeLocalSetting } from '../../actions/local_settings';
 import Link from 'react-router-dom/Link';
-import { injectIntl, defineMessages } from 'react-intl';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import SearchContainer from './containers/search_container';
 import Motion from 'react-motion/lib/Motion';
 import spring from 'react-motion/lib/spring';
@@ -21,6 +22,7 @@ const messages = defineMessages({
 
 const mapStateToProps = state => ({
   showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
+  layout: state.getIn(['localSettings', 'layout']),
 });
 
 @connect(mapStateToProps)
@@ -32,6 +34,7 @@ export default class Compose extends React.PureComponent {
     multiColumn: PropTypes.bool,
     showSearch: PropTypes.bool,
     intl: PropTypes.object.isRequired,
+    layout: PropTypes.string,
   };
 
   componentDidMount () {
@@ -42,8 +45,14 @@ export default class Compose extends React.PureComponent {
     this.props.dispatch(unmountCompose());
   }
 
+  onLayoutClick = (e) => {
+    const layout = e.currentTarget.getAttribute('data-mastodon-layout');
+    this.props.dispatch(changeLocalSetting(['layout'], layout));
+    e.preventDefault();
+  }
+
   render () {
-    const { multiColumn, showSearch, intl } = this.props;
+    const { multiColumn, showSearch, intl, layout } = this.props;
 
     let header = '';
 
@@ -59,6 +68,47 @@ export default class Compose extends React.PureComponent {
       );
     }
 
+    let layoutContent = '';
+
+    switch (layout) {
+    case 'single':
+      layoutContent = (
+        <div className='layout__selector'>
+          <p>
+            <FormattedMessage id='layout.current_is' defaultMessage='Your current layout is:' /> <b><FormattedMessage id='layout.mobile' defaultMessage='Mobile' /></b>
+          </p>
+          <p>
+            <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='auto'><FormattedMessage id='layout.auto' defaultMessage='Auto' /></a> • <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='multiple'><FormattedMessage id='layout.desktop' defaultMessage='Desktop' /></a>
+          </p>
+        </div>
+      );
+      break;
+    case 'multiple':
+      layoutContent = (
+        <div className='layout__selector'>
+          <p>
+            <FormattedMessage id='layout.current_is' defaultMessage='Your current layout is:' /> <b><FormattedMessage id='layout.desktop' defaultMessage='Desktop' /></b>
+          </p>
+          <p>
+            <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='auto'><FormattedMessage id='layout.auto' defaultMessage='Auto' /></a> • <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='single'><FormattedMessage id='layout.mobile' defaultMessage='Mobile' /></a>
+          </p>
+        </div>
+      );
+      break;
+    default:
+      layoutContent = (
+        <div className='layout__selector'>
+          <p>
+            <FormattedMessage id='layout.current_is' defaultMessage='Your current layout is:' /> <b><FormattedMessage id='layout.auto' defaultMessage='Auto' /></b>
+          </p>
+          <p>
+            <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='multiple'><FormattedMessage id='layout.desktop' defaultMessage='Desktop' /></a> • <a onClick={this.onLayoutClick} role='button' tabIndex='0' data-mastodon-layout='single'><FormattedMessage id='layout.mobile' defaultMessage='Mobile' /></a>
+          </p>
+        </div>
+      );
+      break;
+    }
+
     return (
       <div className='drawer'>
         {header}
@@ -79,6 +129,9 @@ export default class Compose extends React.PureComponent {
             }
           </Motion>
         </div>
+
+        {layoutContent}
+
       </div>
     );
   }
diff --git a/app/javascript/mastodon/locales/defaultMessages.json b/app/javascript/mastodon/locales/defaultMessages.json
index dd790f659b..803d9b292e 100644
--- a/app/javascript/mastodon/locales/defaultMessages.json
+++ b/app/javascript/mastodon/locales/defaultMessages.json
@@ -658,6 +658,22 @@
       {
         "defaultMessage": "Logout",
         "id": "navigation_bar.logout"
+      },
+      {
+        "defaultMessage": "Your current layout is:",
+        "id": "layout.current_is"
+      },
+      {
+        "defaultMessage": "Mobile",
+        "id": "layout.mobile"
+      },
+      {
+        "defaultMessage": "Desktop",
+        "id": "layout.desktop"
+      },
+      {
+        "defaultMessage": "Auto",
+        "id": "layout.auto"
       }
     ],
     "path": "app/javascript/mastodon/features/compose/index.json"
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 8fb409618b..c19d4aa024 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -79,6 +79,10 @@
   "home.column_settings.show_reblogs": "Show boosts",
   "home.column_settings.show_replies": "Show replies",
   "home.settings": "Column settings",
+  "layout.auto": "Auto",
+  "layout.current_is": "Your current layout is:",
+  "layout.desktop": "Desktop",
+  "layout.mobile": "Mobile",
   "lightbox.close": "Close",
   "loading_indicator.label": "Loading...",
   "media_gallery.toggle_visible": "Toggle visibility",
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index e204f36374..1fa20a7312 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1447,28 +1447,26 @@
 .drawer__pager {
   box-sizing: border-box;
   padding: 0;
-  flex-grow: 1;
+  flex: 0 0 auto;
   position: relative;
   overflow: hidden;
-  display: flex;
 }
 
 .drawer__inner {
-  position: absolute;
-  top: 0;
-  left: 0;
   background: lighten($ui-base-color, 13%);
   box-sizing: border-box;
   padding: 0;
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
   overflow-y: auto;
   width: 100%;
-  height: 100%;
 
   &.darker {
+    position: absolute;
+    top: 0;
+    left: 0;
     background: $ui-base-color;
+    width: 100%;
+    height: 100%;
   }
 }
 
@@ -1496,6 +1494,25 @@
   }
 }
 
+.layout__selector {
+  margin-top: 20px;
+
+  a {
+    text-decoration: underline;
+    cursor: pointer;
+    color: lighten($ui-base-color, 26%);
+  }
+
+  b {
+    font-weight: bold;
+  }
+
+  p {
+    font-size: 13px;
+    color: $ui-secondary-color;
+  }
+}
+
 .tabs-bar {
   display: flex;
   background: lighten($ui-base-color, 8%);

From 7427680e75330335ab7e19a731609bd0270db010 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Sat, 24 Jun 2017 20:14:58 -0700
Subject: [PATCH 7/8] Allowed little media rules

---
 app/javascript/styles/_mixins.scss    |  2 +-
 app/javascript/styles/components.scss | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss
index 76302af99c..ba9f8e5b60 100644
--- a/app/javascript/styles/_mixins.scss
+++ b/app/javascript/styles/_mixins.scss
@@ -31,4 +31,4 @@
   .multi-columns #{$parent} {
     @content;
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 1fa20a7312..54a44937e8 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1330,7 +1330,7 @@
   position: relative;
 }
 
-@include multi-columns('screen and (min-width: 360px)', $parent: null) {
+@media screen and (min-width: 360px) {
   .columns-area {
     padding: 10px;
   }
@@ -1386,7 +1386,7 @@
   }
 }
 
-@include multi-columns('screen and (min-width: 360px)', $parent: null) {
+@media screen and (min-width: 360px) {
   .tabs-bar {
     margin: 10px;
     margin-bottom: 0;
@@ -1557,7 +1557,7 @@
   }
 }
 
-@include multi-columns('screen and (min-width: 600px)', $parent: null) {
+@media screen and (min-width: 600px) {
   .tabs-bar__link {
     span {
       display: inline;
@@ -3090,7 +3090,7 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-@include single-column('screen and (max-width: 550px)', $parent: null) {
+@media screen and (max-width: 550px) {
   .onboarding-modal {
     width: 100%;
     height: 100%;
@@ -3226,7 +3226,7 @@ button.icon-button.active i.fa-retweet {
   margin-right: 15px;
 }
 
-@include single-column('screen and (max-width: 400px)', $parent: null) {
+@media screen and (max-width: 400px) {
   .onboarding-modal__page-one {
     flex-direction: column;
   }
@@ -3301,7 +3301,7 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-@include single-column('screen and (max-width: 320px) and (max-height: 600px)', $parent: null) {
+@media screen and (max-width: 320px) and (max-height: 600px) {
   .onboarding-modal__page p {
     font-size: 14px;
     line-height: 20px;

From b8a5052d5361b812df3873fdeaa96f901843ef11 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Sat, 24 Jun 2017 20:32:03 -0700
Subject: [PATCH 8/8] Better style handling at small sizes

---
 app/javascript/styles/_mixins.scss    |  8 ++++++++
 app/javascript/styles/components.scss | 27 +++++++++++++++------------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss
index ba9f8e5b60..7412991b8b 100644
--- a/app/javascript/styles/_mixins.scss
+++ b/app/javascript/styles/_mixins.scss
@@ -22,6 +22,14 @@
   }
 }
 
+@mixin limited-single-column($media, $parent: '&') {
+  .auto-columns #{$parent}, .single-column #{$parent} {
+    @media #{$media} {
+      @content;
+    }
+  }
+}
+
 @mixin multi-columns($media, $parent: '&') {
   .auto-columns #{$parent} {
     @media #{$media} {
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 54a44937e8..af9da6c37d 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1328,11 +1328,12 @@
   justify-content: flex-start;
   overflow-x: auto;
   position: relative;
+  padding: 10px;
 }
 
-@media screen and (min-width: 360px) {
+@include limited-single-column('screen and (max-width: 360px)', $parent: null) {
   .columns-area {
-    padding: 10px;
+    padding: 0;
   }
 }
 
@@ -1386,14 +1387,13 @@
   }
 }
 
-@media screen and (min-width: 360px) {
+@include limited-single-column('screen and (max-width: 360px)', $parent: null) {
   .tabs-bar {
-    margin: 10px;
-    margin-bottom: 0;
+    margin: 0;
   }
 
   .search {
-    margin-bottom: 10px;
+    margin-bottom: 0;
   }
 }
 
@@ -1518,6 +1518,8 @@
   background: lighten($ui-base-color, 8%);
   flex: 0 0 auto;
   overflow-y: auto;
+  margin: 10px;
+  margin-bottom: 0;
 }
 
 .tabs-bar__link {
@@ -1545,7 +1547,7 @@
   &:hover,
   &:focus,
   &:active {
-    @media screen and (min-width: 1025px) {
+    @include multi-columns('screen and (min-width: 1025px)') {
       background: lighten($ui-base-color, 14%);
       transition: all 100ms linear;
     }
@@ -1557,7 +1559,7 @@
   }
 }
 
-@media screen and (min-width: 600px) {
+@include limited-single-column('screen and (max-width: 600px)', $parent: null) {
   .tabs-bar__link {
     span {
       display: inline;
@@ -1798,7 +1800,7 @@
     outline: 0;
   }
 
-  @media screen and (max-width: 600px) {
+  @include limited-single-column('screen and (max-width: 600px)') {
     font-size: 16px;
   }
 }
@@ -1815,7 +1817,7 @@
   padding-right: 10px + 22px;
   resize: none;
 
-  @media screen and (max-width: 600px) {
+  @include limited-single-column('screen and (max-width: 600px)') {
     height: 100px !important; // prevent auto-resize textarea
     resize: vertical;
   }
@@ -1928,7 +1930,7 @@
     border-bottom-color: $ui-highlight-color;
   }
 
-  @media screen and (max-width: 600px) {
+  @include limited-single-column('screen and (max-width: 600px)') {
     font-size: 16px;
   }
 }
@@ -2889,6 +2891,7 @@ button.icon-button.active i.fa-retweet {
 
 .search {
   position: relative;
+  margin-bottom: 10px;
 }
 
 .search__input {
@@ -2921,7 +2924,7 @@ button.icon-button.active i.fa-retweet {
     background: lighten($ui-base-color, 4%);
   }
 
-  @media screen and (max-width: 600px) {
+  @include limited-single-column('screen and (max-width: 600px)') {
     font-size: 16px;
   }
 }