From ebf1638145e4e14471b96ffde48abd44c8853a00 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Tue, 3 Nov 2020 17:12:34 -0600
Subject: [PATCH] Updated DisplayOptionsModal to fix themes on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Updated:
- DisplayOptionsModal to fix themes on mobile
---
 .../components/modal/display_options_modal.js          | 10 ++++++++--
 app/javascript/styles/global.css                       |  1 +
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/javascript/gabsocial/components/modal/display_options_modal.js b/app/javascript/gabsocial/components/modal/display_options_modal.js
index 8617287c..0cf53310 100644
--- a/app/javascript/gabsocial/components/modal/display_options_modal.js
+++ b/app/javascript/gabsocial/components/modal/display_options_modal.js
@@ -15,6 +15,7 @@ import Button from '../button'
 import Text from '../text'
 import Slider from '../slider'
 import SettingSwitch from '../setting_switch'
+import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
 
 class DisplayOptionsModal extends ImmutablePureComponent {
 
@@ -118,7 +119,7 @@ class DisplayOptionsModal extends ImmutablePureComponent {
           <Text weight='bold' size='small' color='secondary'>
             Theme
           </Text>
-          <div className={[_s.d, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>
+          <div className={[_s.d, _s.radiusSmall, _s.flexRow, _s.flexWrap, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>
 
             <ThemeBlock
               title='White'
@@ -199,7 +200,11 @@ class ThemeBlock extends React.PureComponent {
     const id = `theme-${value}`
 
     return (
-      <label className={[_s.d, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
+      <ResponsiveClassesComponent
+        classNames={[_s.d, _s.px10, _s.flexGrow1].join(' ')}
+        classNamesXS={[_s.d, _s.px10, _s.flexGrow1, _s.w48PC, _s.mb10].join(' ')}
+      >
+      <label className={[_s.d, _s.w100PC].join(' ')} htmlFor={id}>
         <div
           className={[_s.d, _s.borderBottom6PX, _s.aiCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')}
           style={style}
@@ -223,6 +228,7 @@ class ThemeBlock extends React.PureComponent {
           </Text>
         </div>
       </label>
+      </ResponsiveClassesComponent>
     )
   }
 
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index cf5f26a8..fdf9ba7f 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -561,6 +561,7 @@ pre {
 
 .w100PC { width: 100%; }
 .w50PC { width: 50%; }
+.w48PC { width: 48%; }
 .w25PC { width: 25%; }
 .w1255PX { width: 1255px; }
 .w1015PX { width: 1015px; }