fix width adapting for 3-column drop down panels

e0c8488c3f6ffe7b7838161c5454a4409ca2743a

RossAscends <124905043+RossAscends@users.noreply.github.com>

public/css/mobile-styles.css+0 -10 Viewed

+    }
+}
-@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 {

public/index.html+3 -3 Viewed

                     </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>

                         </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

                             </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">

public/style.css+11 -0 Viewed

     text-align: center;
+}
+#UI-Theme-Block,
+#UI-Customization,
+#power-user-options-block,
+#ContextSettings,
+#InstructSettingsColumn,
+#InstructSequencesColumn {
+    flex-basis: 250px;
+}
 .userSettingsInnerExpandable {
     border: 1px solid;