From 56d013f6631c75abb9103bf2f4eeb1b7e89cc7ed Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 30 Apr 2025 23:19:24 -0500
Subject: [PATCH] Apply masked scroll to env vars

---
 src/components/EnvVar.tsx         | 9 ++++++---
 src/components/MaskedScroll.tsx   | 8 +++-----
 src/components/useMaskedScroll.ts | 7 ++++++-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/EnvVar.tsx b/src/components/EnvVar.tsx
index 484e0c5e..0ede9674 100644
--- a/src/components/EnvVar.tsx
+++ b/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>
   );
 }
diff --git a/src/components/MaskedScroll.tsx b/src/components/MaskedScroll.tsx
index 8e2eb7f8..eb612502 100644
--- a/src/components/MaskedScroll.tsx
+++ b/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 }}
diff --git a/src/components/useMaskedScroll.ts b/src/components/useMaskedScroll.ts
index 99419bdc..61aef479 100644
--- a/src/components/useMaskedScroll.ts
+++ b/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 };
 }