From 1e24d97fd86461e52d58af1e0d510a1739a0a15e Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 3 Sep 2023 02:00:51 +0300
Subject: [PATCH] Better layout for user settings on small screens

---
 public/css/mobile-styles.css | 6 +++++-
 public/index.html            | 7 +++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index e05f77c27..b5c58f969 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -271,7 +271,11 @@
 }
 
 @media screen and (min-width: 1001px) {
-    #PygOverrides, #ContextFormatting {
+    #PygOverrides,
+    #ContextFormatting,
+    #UI-Theme-Block,
+    #UI-Customization,
+    #power-user-options-block {
         flex: 1;
     }
 }
diff --git a/public/index.html b/public/index.html
index 868530386..2e0d6a511 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2701,7 +2701,7 @@
                     <div id="version_display"></div>
                 </div>
                 <div class="flex-container spaceEvenly">
-                    <div id="UI-Theme-Block" class="flex-container flexFlowColumn drawer33pWidth">
+                    <div id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p">
                         <div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
                             <div id="UI-Mode-Block">
                                 <h4 data-i18n="UI Mode">
@@ -2837,7 +2837,7 @@
                         </div>
 
                     </div>
-                    <div name="UI Customization" class="flex-container drawer33pWidth">
+                    <div id="UI-Customization" class="flex-container wide100p">
                         <div class="ui-settings">
                             <h4><span data-i18n="UI Customization">UI Customization</span></h4>
                             <div data-newbie-hidden class="range-block">
@@ -2972,8 +2972,7 @@
                         </div>
 
                     </div>
-
-                    <div id="power-user-options-block" class="flex-container drawer33pWidth">
+                    <div id="power-user-options-block" class="flex-container wide100p">
                         <div id="power-user-option-checkboxes">
                             <h4 data-i18n="Power User Options">Power User Options</h4>
                             <label data-newbie-hidden class="checkbox_label" for="swipes-checkbox">