[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>

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);
 

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)"/>