From 331054870f827493b6f739eacc7314d339f5dbe2 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 6 Feb 2020 16:06:09 +0100
Subject: [PATCH] Better sidebar layout for mobile

---
 .../src/less2/include/sidebar-layout.less     | 21 ++++++++++++++++++-
 www/settings/app-settings.less                |  6 ++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less
index 59ea22c76..5525f0fb8 100644
--- a/customize.dist/src/less2/include/sidebar-layout.less
+++ b/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 {
@@ -96,7 +98,7 @@
                     }
                 }
                 margin-bottom: 20px;
-            .buttons_main();
+                .buttons_main();
             }
             [type="text"], [type="password"], button {
                 vertical-align: middle;
@@ -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;
+            }
+        }
     }
 }
 
diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index b6cd22fc1..251b7097c 100644
--- a/www/settings/app-settings.less
+++ b/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%;
                 }
             }