From e0c8488c3f6ffe7b7838161c5454a4409ca2743a Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Wed, 4 Sep 2024 08:23:00 +0900
Subject: [PATCH] fix width adapting for 3-column drop down panels

---
 public/css/mobile-styles.css | 12 +-----------
 public/index.html            |  8 ++++----
 public/style.css             | 13 ++++++++++++-
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index 5d4e44a1b..716c00e69 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -342,16 +342,6 @@
     }
 }
 
-@media screen and (min-width: 1001px) {
-
-    #ContextFormatting,
-    #UI-Theme-Block,
-    #UI-Customization,
-    #power-user-options-block {
-        flex: 1;
-    }
-}
-
 /*landscape mode phones and ipads*/
 @media screen and (max-width: 1000px) and (orientation: landscape) {
     body.waifuMode img.expression {
@@ -502,4 +492,4 @@
     #horde_model {
         height: unset;
     }
-}
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index a22250c3f..a7a7414db 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3685,7 +3685,7 @@
                     </div>
                 </div>
                 <div id="user-settings-block-content" class="flex-container spaceEvenly">
-                    <div name="UserSettingsFirstColumn" id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p">
+                    <div name="UserSettingsFirstColumn" id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p flex1">
                         <div id="UI-presets-block" class="flex-container flexFlowColumn">
                             <h4 class="title_restorable">
                                 <span data-i18n="UI Theme">UI Theme</span>
@@ -3902,7 +3902,7 @@
 
                         </div>
                     </div>
-                    <div name="UserSettingsSecondColumn" id="UI-Customization" class="flex-container flexFlowColumn wide100p flexNoGap">
+                    <div name="UserSettingsSecondColumn" id="UI-Customization" class="flex-container flexFlowColumn wide100p flexNoGap flex1">
                         <div name="CharacterHandlingToggles">
                             <h4 data-i18n="Character Handling">
                                 Character Handling
@@ -4044,7 +4044,7 @@
                             </div>
                         </div>
                     </div>
-                    <div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p">
+                    <div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p flex1">
                         <div id="power-user-option-checkboxes">
 
                             <div name="ChatMessageHandlingToggles">
@@ -6502,4 +6502,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 752b32dbb..da1e6b43d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4388,6 +4388,17 @@ body.big-avatars .missing-avatar {
     text-align: center;
 }
 
+#UI-Theme-Block,
+#UI-Customization,
+#power-user-options-block,
+#ContextSettings,
+#InstructSettingsColumn,
+#InstructSequencesColumn {
+    flex-basis: 250px;
+}
+
+
+
 
 .userSettingsInnerExpandable {
     border: 1px solid;
@@ -5461,4 +5472,4 @@ body:not(.movingUI) .drawer-content.maximized {
     max-height: 50dvh;
     resize: vertical;
     overflow: auto;
-}
+}
\ No newline at end of file