[FIX] website_sale: ecommerce category scrollbar behavior

In commit[1] an improvement was made to increase the scrollbar height
on hover to make it easier to scroll. However chromium updated the way
::webkit-scrollbar works breaking the behavior on recent browser. On
firefox the margin was applied without the change of height on the
scrollbar creating a visual glitch on hover.

On chromium >121 the `scrollbar` property takes priority over the
`::webkit`-x to keep the scrollbar styling with height change on webkit
browser we have to apply the `scrollbar` property only on Firefox.

The mixin was used only on `website_sale` filter offcanvas and category
horizontal scrollbar, this commit removes the mixin and customization on
the offcanvas vertical scroll to make it consistent with the other
offcanvas across website.

This commit also disables the scrollbar hover effect on touchscreens.

The transform was causing an issue on some devices displaying the
scrollbar behind the items, thus it's now applied on the container.

Note: We use not `.o_wsale_filmstip_fancy_disabled` to avoid the
`scrollbar` property being set when the Javascript is not loaded yet.
Otherwise the scrollbar would be invisible until a hover from the user.

[1]: odoo/odoo@bdede43e1e

task-3718501

closes odoo/odoo#152456

Signed-off-by: Valentin Chevalier <vcr@odoo.com>

addons/website_sale/static/src/js/website_sale.js

@@ -10,6 +10,7 @@ import { ProductImageViewer } from "@website_sale/js/components/website_sale_ima
 import { jsonrpc } from "@web/core/network/rpc_service";
 import { debounce, throttleForAnimation } from "@web/core/utils/timing";
 import { listenSizeChange, SIZES, utils as uiUtils } from "@web/core/ui/ui_service";
+import { isBrowserFirefox, hasTouch } from "@web/core/browser/feature_detection";
 import { Component } from "@odoo/owl";
 
 export const WebsiteSale = publicWidget.Widget.extend(VariantMixin, cartHandlerMixin, {
@@ -94,6 +95,11 @@ export const WebsiteSale = publicWidget.Widget.extend(VariantMixin, cartHandlerM
             this.triggerVariantChange(this.$el);
         });
 
+        // This allows conditional styling for the filmstrip
+        if (isBrowserFirefox() || hasTouch()) {
+            this.el.querySelector('.o_wsale_filmstip_container')?.classList.add('o_wsale_filmstip_fancy_disabled');
+        }
+
         this.getRedirectOption();
         return def;
     },

addons/website_sale/static/src/scss/website_sale.scss

@@ -43,27 +43,6 @@ $input-border-color: $gray-400;
     }
 }
 
-@mixin o-wsale-scrollbar-subdle($-vertical: true) {
-    $-o-scrollbar-subdle-bg: rgba($dark, 0.05);
-
-    scrollbar-color: currentColor $-o-scrollbar-subdle-bg;
-    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;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: $-o-scrollbar-subdle-bg;
-    }
-}
-
 .oe_website_sale {
     // ==== Products list designs
     .o_wsale_design_cards {
@@ -104,7 +83,34 @@ $input-border-color: $gray-400;
     }
 
     .o_wsale_filmstip_container {
-        &:hover {
+        $-o-scrollbar-subdle-bg: rgba($dark, 0.05);
+
+        transform: translateZ(0);
+
+        &.o_wsale_filmstip_fancy_disabled {
+            scrollbar-color: currentColor $-o-scrollbar-subdle-bg;
+        }
+
+        .o_wsale_filmstip_wrapper {
+            margin-bottom: map-get($spacers, 2);
+            scroll-snap-type: x mandatory;
+            cursor: grab;
+
+            &::-webkit-scrollbar {
+                height: 2px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border-radius: $btn-border-radius-sm;
+                background: currentColor;
+            }
+
+            &::-webkit-scrollbar-track {
+                background: $-o-scrollbar-subdle-bg;
+            }
+        }
+
+        &:not(.o_wsale_filmstip_fancy_disabled):hover {
             .o_wsale_filmstip_wrapper {
                 margin-bottom: map-get($spacers, 1);
 
@@ -115,16 +121,6 @@ $input-border-color: $gray-400;
         }
     }
 
-    .o_wsale_filmstip_wrapper {
-        margin-bottom: map-get($spacers, 2);
-        scroll-snap-type: x mandatory;
-        @include o-wsale-scrollbar-subdle($-vertical: false);
-
-        .o_wsale_filmstip {
-            transform: translateX(0);
-        }
-    }
-
     .activeDrag * {
         cursor: grabbing !important;
         cursor: -webkit-grabbing;
@@ -189,10 +185,6 @@ $input-border-color: $gray-400;
         padding-bottom: 0.75rem;
     }
 
-    #o_wsale_offcanvas_content {
-        @include o-wsale-scrollbar-subdle();
-    }
-
     #products_grid_before {
         // == Guess the distance with the navbar
         $-container-top-gap: calc(#{map-get($spacers, 2)} + var(--gutter-x));