fix ugly scrollbar

dist/index.mjs

@@ -6058,7 +6058,7 @@ function wg(e) {
             " games"
           ] })
         ] }),
-        /* @__PURE__ */ T.jsxs("div", { className: "overflow-scroll flex flex-warp items-center order-1 md:order-2 mb-3 md:mb-0", children: [
+        /* @__PURE__ */ T.jsxs("div", { className: "overflow-scroll no-scrollbar flex flex-warp items-center order-1 md:order-2 mb-3 md:mb-0", children: [
           n.Variant ? /* @__PURE__ */ T.jsxs(T.Fragment, { children: [
             /* @__PURE__ */ T.jsx("div", { className: "mr-1 font-black text-blue-500", children: "VARIANT" }),
             /* @__PURE__ */ T.jsx("select", { className: "px-2 mr-1 bg-zinc-800 text-xs h-6 border font-bold border-zinc-100 focus:outline-none", id: "players", onChange: (u) => r((d) => ({ ...d, Variant: u.target.value.replace(/\s/g, "") })), children: t.variants.map((u) => /* @__PURE__ */ T.jsx("option", { value: u, children: u }, u)) })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quibbble/boardgame",
   "private": false,
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "React component library for Quibbble boardgames.",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",

src/components/HomePage/HomePage.jsx

@@ -56,7 +56,7 @@ export function HomePage(props) {
                                 </button>
                                 <a className="italic text-xs py-1 px-2 border-blue-500 border border-dashed text-blue-500" href="https://quibbble.com" target="_blank">more <span className="text-zinc-100 font-['lobster'] text-sm not-italic">quibbble</span> games</a>
                             </div>
-                            <div className="overflow-scroll flex flex-warp items-center order-1 md:order-2 mb-3 md:mb-0">
+                            <div className="overflow-scroll no-scrollbar flex flex-warp items-center order-1 md:order-2 mb-3 md:mb-0">
                                 {
                                     options.Variant ? <>
                                         <div className="mr-1 font-black text-blue-500">VARIANT</div>

src/tailwind.css

@@ -13,6 +13,18 @@
     }
 }
 
+@layer utilities {
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .no-scrollbar {
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+    }
+}
+
 html, body {
     scroll-behavior: smooth;