Optimized outdated env var scroll

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>}

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(

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>;