Results: Fix scroll snapping on mobile (and Firefox)

For mobile, we want the snapping x to be mandatory. However, that breaks scroll-y on Firefox which requires proximity. This is something tailwind does not allow right now, so we use some custom css here.

Author: tordans

src/components/Scenes/Results/Results.tsx

@@ -16,7 +16,7 @@ export const Results: React.FC<Props> = ({
   const resultItems = results?.data?.items || []
 
   return (
-    <div className="z-0 flex h-full flex-grow snap-both snap-proximity flex-row overflow-scroll overscroll-contain">
+    <div className="snap-x-not-y z-0 flex h-full flex-grow flex-row overflow-scroll overscroll-contain">
       {resultItems.map((scene, index) => (
         <ResultColumn
           category={category}

src/styles/global.css

@@ -14,3 +14,10 @@
     @apply text-slate-800;
   }
 }
+
+@layer components {
+  .snap-x-not-y {
+    scroll-snap-type: x mandatory;
+    scroll-snap-type: y proximity;
+  }
+}