From ac398e42cddf5a8d49852b6f976a51970ffc0a8b Mon Sep 17 00:00:00 2001
From: mano-odoo <mano@odoo.com>
Date: Tue, 27 Jun 2023 10:15:41 +0200
Subject: [PATCH] [IMP] website_sale: categories scrollbar hover

Issue:

The eCommerce categories scrollbar is too small/ not easy to grab with
your mouse.

Fix:

The scrollbar height is increased on hover to increase the grabbing area

task-3371760

closes odoo/odoo#126502

Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
---
 .../static/src/scss/website_sale.scss             | 15 +++++++++++++++
 addons/website_sale/views/templates.xml           |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index bede6f8ad09..dba584b80c3 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -45,12 +45,14 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
 @mixin o-wsale-scrollbar-subdle($-vertical: true) {
     scrollbar-color: currentColor $light;
     scrollbar#{if($-vertical, -width, -height)}: 2px;
+    cursor: grab;
 
     &::-webkit-scrollbar {
         #{if($-vertical, width, height)}: 2px;
     }
 
     &::-webkit-scrollbar-thumb {
+        border-radius: $btn-border-radius-sm;
         background: currentColor;
     }
 
@@ -96,7 +98,20 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         --o-wsale-card-thumb-fill-mode: cover;
     }
 
+    .o_wsale_filmstip_container {
+        &:hover {
+            .o_wsale_filmstip_wrapper {
+                margin-bottom: map-get($spacers, 1);
+
+                &::-webkit-scrollbar {
+                    height: 6px;
+                }
+            }
+        }
+    }
+
     .o_wsale_filmstip_wrapper {
+        margin-bottom: map-get($spacers, 2);
         scroll-snap-type: x mandatory;
         @include o-wsale-scrollbar-subdle($-vertical: false);
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 7fcb5a6ffae..a482d7d96ff 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -769,7 +769,7 @@
         </t>
 
         <div t-if="entries" class="o_wsale_filmstip_container d-flex align-items-stretch mb-2 overflow-hidden">
-            <div class="o_wsale_filmstip_wrapper pb-1 mb-2 overflow-auto">
+            <div class="o_wsale_filmstip_wrapper pb-1 overflow-auto">
                 <ul class="o_wsale_filmstip d-flex align-items-stretch mb-0 list-unstyled overflow-visible">
                     <t t-foreach="entries" t-as="c" t-if="c.image_128" t-set="atLeastOneImage" t-value="True"/>
                     <t t-if="category.parent_id" t-set="backUrl" t-value="keep('/shop/category/' + slug(category.parent_id), category=0)"/>