Better sidebar layout for mobile

customize.dist/src/less2/include/sidebar-layout.less

@@ -1,6 +1,7 @@
 @import (reference) "/customize/src/less2/include/colortheme-all.less";
 @import (reference) "/customize/src/less2/include/leftside-menu.less";
 @import (reference) "/customize/src/less2/include/buttons.less";
+@import (reference) "/customize/src/less2/include/browser.less";
 
 @sidebar_button-width: 400px;
 
@@ -73,6 +74,7 @@
             padding: 5px 20px;
             color: @rightside-color;
             overflow: auto;
+            padding-bottom: 200px;
 
             // Following rules are only in settings
             .cp-sidebarlayout-element {
@@ -107,6 +109,7 @@
             .cp-sidebarlayout-input-block {
                 display: inline-flex;
                 width: @sidebar_button-width;
+                max-width: 100%;
                 input {
                     flex: 1;
                     //border-radius: 0.25em 0 0 0.25em;
@@ -118,6 +121,7 @@
                     //border: 1px solid #adadad;
                     border-left: 0px;
                     height: @variables_input-height;
+                    margin: 0 !important;
                 }
             }
             &>div {
@@ -162,6 +166,21 @@
             }
 */
         }
+        @media screen and (max-width: @browser_media-medium-screen) {
+            flex-flow: column;
+            overflow: auto;
+            #cp-sidebarlayout-leftside {
+                width: 100%;
+                .cp-sidebarlayout-categories {
+                    .cp-sidebarlayout-category {
+                        margin: 0;
+                    }
+                }
+            }
+            #cp-sidebarlayout-rightside {
+                overflow: unset;
+            }
+        }
     }
 }
 

www/settings/app-settings.less

@@ -121,8 +121,13 @@
                 border: 1px solid black;
             }
             .cp-settings-language-selector {
+                #cp-language-selector {
+                    display: inline;
+                }
                 button.btn {
                     width: @sidebar_button-width;
+                    max-width: 100%;
+                    margin: 0 !important;
                     background-color: @colortheme_sidebar-button-alt-bg;
                     border-color: #adadad;
                     color: black;
@@ -149,6 +154,7 @@
             .cp-settings-info-block {
                 [type="text"] {
                     width: @sidebar_button-width;
+                    max-width: 100%;
                 }
             }