[IMP] base: better onboarding bars on small devices

In small devices, onboarding bars are displayed vertial, which
takes too much screen space, and user has to scroll down
a lot to view actual content.

This commit improves the behavior by showing onboarding bars
horizontally (with scrolling) in small devices also, and thus
occupying minimal screen space.

task: 1929048

closes odoo/odoo#30823

1 files changed, 13 insertions, 5 deletions

diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss
index 26866c4b62c..2fb27a7c55c 100644
--- a/odoo/addons/base/static/src/scss/onboarding.scss
+++ b/odoo/addons/base/static/src/scss/onboarding.scss
@@ -35,6 +35,10 @@ $o-onboarding-violet-ui-2: #FBEEC8;
 
     .o_onboarding_wrap {
         padding: $o-horizontal-padding*2 $o-horizontal-padding;
+
+        @include media-breakpoint-down(sm) {
+            overflow-x: auto;
+        }
     }
     .o_onboarding_step_title, a.o_onboarding_all_done {
         cursor: pointer;
@@ -76,10 +80,6 @@ $o-onboarding-violet-ui-2: #FBEEC8;
     .o_onboarding_steps {
         flex-flow: row nowrap;
         justify-content: initial;
-
-        @include media-breakpoint-down(sm) {
-           flex-flow: column nowrap;
-        }
     }
 
     .o_onboarding_step {
@@ -91,7 +91,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
         opacity: 0.6;
 
         @include media-breakpoint-down(sm) {
-            text-align: left;
+            flex: 1 0 auto;
             margin-bottom: 16px;
             align-items: baseline;
 
@@ -114,6 +114,10 @@ $o-onboarding-violet-ui-2: #FBEEC8;
             @include media-breakpoint-up(lg) {
                 min-width: 230px;
             }
+            /* Progressbar should not break in mobile view */
+            @include media-breakpoint-down(sm) {
+                min-width: 230px;
+            }
             max-width: 230px;
             padding: 0 10px;
 
@@ -140,6 +144,10 @@ $o-onboarding-violet-ui-2: #FBEEC8;
         }
 
         .o_onboarding_dot {
+            @include media-breakpoint-down(sm) {
+                margin-left: auto;
+                margin-right: auto;
+            }
             width: $o-onboarding-dot-size;
             height: $o-onboarding-dot-size;
             color: transparent;