fix(explorer): scrollbar issues in firefox (#5322)

* fix(explorer): scrollbar issues in firefox * fix: improve themed styles * feat: changeset
iotaledger · Feb 12, 2025 · c0ef9f2 · c0ef9f2
1 parent 73bb2a6
commit c0ef9f2
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 1 deletion.
diff --git a/.changeset/flat-suits-tie.md b/.changeset/flat-suits-tie.md
@@ -0,0 +1,5 @@
+---
+'@iota/apps-ui-kit': patch
+---
+
+Update scrollbar styles for firefox and add firefox only class selector
diff --git a/apps/explorer/src/components/owned-coins/OwnedCoinsPanel.tsx b/apps/explorer/src/components/owned-coins/OwnedCoinsPanel.tsx
@@ -34,7 +34,7 @@ export function CoinsPanel({ coinType, id }: CoinsPanelProps): JSX.Element {
 
     return (
         <div className="max-h-[230px] overflow-auto">
-            <div className="flex flex-col flex-wrap gap-xs" ref={coinsSectionRef}>
+            <div className="flex flex-col flex-wrap gap-xs firefox:pr-xs" ref={coinsSectionRef}>
                 {data &&
                     data.pages.map((page) =>
                         page.data.map((coin) => (

diff --git a/apps/ui-kit/src/lib/styles/index.css b/apps/ui-kit/src/lib/styles/index.css
@@ -120,6 +120,19 @@
     }
 }
 
+@-moz-document url-prefix() {
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: theme('colors.neutral.30') transparent;
+    }
+
+    :root:not(.dark) {
+        * {
+            scrollbar-color: theme('colors.neutral.80') transparent;
+        }
+    }
+}
+
 @supports selector(::-webkit-scrollbar) {
     *::-webkit-scrollbar {
         @apply w-3.5;

diff --git a/apps/ui-kit/src/lib/tailwind/base.presets.ts b/apps/ui-kit/src/lib/tailwind/base.presets.ts
@@ -10,10 +10,12 @@ import {
     OPACITY,
     generateVariableSpacing,
 } from './constants';
+import { firefoxPlugin } from './plugins';
 
 export const BASE_CONFIG: Config = {
     content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
     darkMode: 'class',
+    plugins: [firefoxPlugin],
     theme: {
         extend: {
             fontSize: {

diff --git a/apps/ui-kit/src/lib/tailwind/plugins.ts b/apps/ui-kit/src/lib/tailwind/plugins.ts
@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import plugin from 'tailwindcss/plugin';
+
+export const firefoxPlugin = plugin(({ addVariant }) => {
+    addVariant('firefox', '@-moz-document url-prefix()');
+});