Apply masked scroll to env vars

src/components/EnvVar.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx/lite';
 import { ReactNode } from 'react';
 import CopyButton from './CopyButton';
+import MaskedScroll from './MaskedScroll';
 
 export default function EnvVar({
   variable,
@@ -18,12 +19,14 @@ export default function EnvVar({
   className?: string,
 }) {
   return (
-    <div
+    <MaskedScroll
+      direction="horizontal"
       className={clsx(
         'inline-flex max-w-full',
-        'overflow-x-auto overflow-y-hidden',
+        'overflow-y-hidden',
         className,
       )}
+      hideScrollbar
     >
       <span className="inline-flex items-center gap-1">
         <span className={clsx(
@@ -50,6 +53,6 @@ export default function EnvVar({
             {trailingContent}
           </span>}
       </span>
-    </div>
+    </MaskedScroll>
   );
 }

src/components/MaskedScroll.tsx

@@ -3,7 +3,7 @@ import { HTMLAttributes, useRef } from 'react';
 import useMaskedScroll from './useMaskedScroll';
 
 export default function MaskedScroll({
-  direction = 'vertical',
+  direction,
   fadeSize,
   animationDuration,
   hideScrollbar,
@@ -17,7 +17,7 @@ export default function MaskedScroll({
 Omit<Parameters<typeof useMaskedScroll>[0], 'ref'>) {
   const ref = useRef<HTMLDivElement>(null);
 
-  const { styleMask } = useMaskedScroll({
+  const { styleMask, classNameMask } = useMaskedScroll({
     ref,
     direction,
     fadeSize,
@@ -31,9 +31,7 @@ Omit<Parameters<typeof useMaskedScroll>[0], 'ref'>) {
     {...props}
     ref={ref}
     className={clsx(
-      direction === 'vertical'
-        ? 'max-h-full overflow-y-scroll'
-        : 'max-w-full overflow-x-scroll',
+      classNameMask,
       className,
     )}
     style={{ ...styleMask, ...style }}

src/components/useMaskedScroll.ts

@@ -108,5 +108,10 @@ export default function useMaskedScroll({
     };
   }, [isVertical, fadeSize, animationDuration, hideScrollbar]);
 
-  return { styleMask, updateMask };
+  const classNameMask = useMemo(() => isVertical
+    ? 'max-h-full overflow-y-scroll'
+    : 'max-w-full overflow-x-scroll'
+  , [isVertical]);
+
+  return { styleMask, classNameMask, updateMask };
 }