From 761320ae45698616b862c403059bdfd53332d508 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Tue, 22 Aug 2023 13:24:44 +0200
Subject: [PATCH] [FIX] web: adapt scroll on setting app selector

Prior to this commit, the setting page had 2 vertical scrollbars, which
wasn't clear to use on mobile.

This commit changes the scrolling orientation of the app selector on
mobile to make it easier to use in small screen.

task-3349528

closes odoo/odoo#135214

X-original-commit: 4b8d93799c32a62f16200a88ad32000203918d63
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 .../settings/settings_page.xml                  | 17 +++++++++++------
 .../settings_form_view_mobile.scss              |  4 ++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml b/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
index 51959b6ee7d..4c79d489685 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
+++ b/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
@@ -2,12 +2,17 @@
 <templates xml:space="preserve">
     <t t-name="web.SettingsPage">
         <div class="o_setting_container">
-            <div class="settings_tab" t-if="!env.isSmall or state.search.value.length === 0">
-                <t t-foreach="props.modules" t-as="module" t-key="module.key">
-                    <div class="tab" t-if="!module.isVisible" t-att-class="(state.selectedTab === module.key and state.search.value.length === 0) ? 'selected': ''" t-att-data-key="module.key" role="tab" t-on-click="() => this.onSettingTabClick(module.key)">
-                        <div class="icon d-none d-md-block" t-attf-style="background : url('{{module.imgurl}}') no-repeat center;background-size:contain;"/> <span class="app_name"><t t-esc="module.string"/></span>
-                    </div>
-                </t>
+            <div class="position-sticky top-0 flex-grow-0 z-index-1">
+                <div class="settings_tab h-100" t-if="!env.isSmall or state.search.value.length === 0">    
+                    <t t-foreach="props.modules" t-as="module" t-key="module.key">
+                        <div class="tab" t-if="!module.isVisible"
+                             t-att-class="{
+                                'selected': state.selectedTab === module.key and state.search.value.length === 0, 'position-sticky start-0 end-0 bg-primary z-index-1': state.selectedTab === module.key and state.search.value.length === 0 and env.isSmall
+                             }" t-att-data-key="module.key" role="tab" t-on-click="() => this.onSettingTabClick(module.key)">
+                            <div class="icon d-none d-md-block" t-attf-style="background : url('{{module.imgurl}}') no-repeat center;background-size:contain;"/> <span class="app_name"><t t-esc="module.string"/></span>
+                        </div>
+                    </t>
+                </div>
             </div>
             <ActionSwiper
                     onRightSwipe = " hasRightSwipe() ? {
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss b/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss
index 5aaad213a28..0484893d5bc 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss
@@ -1,6 +1,6 @@
 @include media-breakpoint-down(md) {
 
-    .o_base_settings_view {
+    .o_base_settings_view .o_form_renderer {
         flex-flow: column nowrap;
 
         > .o_control_panel {
@@ -63,4 +63,4 @@
         }
 
     }
-}
\ No newline at end of file
+}