From ca9cc320ed943113565399d90ea3733c9d9eb9f2 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 12 Sep 2025 08:54:04 -0500
Subject: [PATCH] Optimized outdated env var scroll

---
 src/admin/insights/AdminAppInsightsClient.tsx | 8 +++++---
 src/components/EnvVar.tsx                     | 6 ++++--
 src/components/MaskedScroll.tsx               | 7 ++++++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/admin/insights/AdminAppInsightsClient.tsx b/src/admin/insights/AdminAppInsightsClient.tsx
index dc5b5847..87b3759e 100644
--- a/src/admin/insights/AdminAppInsightsClient.tsx
+++ b/src/admin/insights/AdminAppInsightsClient.tsx
@@ -47,6 +47,7 @@ import IconTag from '@/components/icons/IconTag';
 import IconPhoto from '@/components/icons/IconPhoto';
 import { HiOutlineDocumentText } from 'react-icons/hi';
 import { ReactNode } from 'react';
+import MaskedScroll from '@/components/MaskedScroll';
 
 const DEBUG_COMMIT_SHA = '4cd29ed';
 const DEBUG_COMMIT_MESSAGE = 'Long commit message for debugging purposes';
@@ -272,14 +273,15 @@ export default function AdminAppInsightsClient({
                 when including the following deprecated environment variables:
                 <div className="space-y-1">
                   {usedDeprecatedEnvVars.map(({ old, replacement }) => (
-                    <div
+                    <MaskedScroll
                       key={old}
                       className="flex items-center gap-2"
+                      direction="horizontal"
                     >
                       <div className="text-xs text-dim">{old}</div>
                       <FaArrowRight size={11} className="shrink-0" />
-                      <EnvVar variable={replacement} className="w-full" />
-                    </div>
+                      <EnvVar variable={replacement} maskScroll={false} />
+                    </MaskedScroll>
                   ))}
                 </div>
               </div>}
diff --git a/src/components/EnvVar.tsx b/src/components/EnvVar.tsx
index 451bba1c..1f360b6b 100644
--- a/src/components/EnvVar.tsx
+++ b/src/components/EnvVar.tsx
@@ -9,6 +9,7 @@ export default function EnvVar({
   accessory,
   includeCopyButton = true,
   trailingContent,
+  maskScroll = true,
   className,
 }: {
   variable: string,
@@ -16,16 +17,17 @@ export default function EnvVar({
   accessory?: ReactNode,
   includeCopyButton?: boolean,
   trailingContent?: ReactNode,
+  maskScroll?: boolean,
   className?: string,
 }) {
   return (
     <MaskedScroll
       direction="horizontal"
       className={clsx(
-        'inline-flex max-w-full',
-        'overflow-y-hidden',
+        maskScroll && 'inline-flex max-w-full overflow-y-hidden',
         className,
       )}
+      enabled={maskScroll}
     >
       <span className="inline-flex items-center gap-1">
         <span className={clsx(
diff --git a/src/components/MaskedScroll.tsx b/src/components/MaskedScroll.tsx
index ebbef434..ba56cd83 100644
--- a/src/components/MaskedScroll.tsx
+++ b/src/components/MaskedScroll.tsx
@@ -3,6 +3,7 @@ import useMaskedScroll from './useMaskedScroll';
 
 export default function MaskedScroll({
   ref: refProp,
+  enabled = true,
   direction,
   fadeSize,
   animationDuration,
@@ -15,6 +16,7 @@ export default function MaskedScroll({
   ...props
 }: {
   ref?: RefObject<HTMLDivElement | null>
+  enabled?: boolean
 } & HTMLAttributes<HTMLDivElement>
 & Omit<Parameters<typeof useMaskedScroll>[0], 'ref'>) {
   const refInternal = useRef<HTMLDivElement>(null);
@@ -34,7 +36,10 @@ export default function MaskedScroll({
   return <div
     {...props}
     ref={ref}
-    style={{ ...styleMask, ...style }}
+    style={{
+      ...enabled && styleMask,
+      ...style,
+    }}
   >
     {children}
   </div>;