From 5b391813b467c54c92b6daa1ce1196d100b1a971 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 17 Feb 2025 22:09:00 -0600
Subject: [PATCH] Adjust envvar overflow

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

diff --git a/src/admin/insights/AdminAppInsightsClient.tsx b/src/admin/insights/AdminAppInsightsClient.tsx
index f823c229..c46d6db8 100644
--- a/src/admin/insights/AdminAppInsightsClient.tsx
+++ b/src/admin/insights/AdminAppInsightsClient.tsx
@@ -317,7 +317,8 @@ export default function AdminAppInsightsClient({
                 <EnvVar
                   variable="NEXT_PUBLIC_GRID_HOMEPAGE_ENABLED"
                   value="1"
-                />.
+                  trailingContent="."
+                />
               </>}
             />}
           </>
diff --git a/src/components/EnvVar.tsx b/src/components/EnvVar.tsx
index e1d4956c..b96ecf3b 100644
--- a/src/components/EnvVar.tsx
+++ b/src/components/EnvVar.tsx
@@ -1,21 +1,24 @@
 import clsx from 'clsx/lite';
+import { ReactNode } from 'react';
 import CopyButton from './CopyButton';
 
 export default function EnvVar({
   variable,
   value,
   includeCopyButton = true,
+  trailingContent,
   className,
 }: {
   variable: string,
   value?: string,
   includeCopyButton?: boolean,
+  trailingContent?: ReactNode,
   className?: string,
 }) {
   return (
     <div
       className={clsx(
-        'inline-flex',
+        'inline-flex max-w-full',
         'overflow-x-auto overflow-y-hidden',
         className,
       )}
@@ -37,6 +40,7 @@ export default function EnvVar({
             text={variable}
             subtle
           />}
+        {trailingContent}
       </span>
     </div>
   );
diff --git a/src/components/ScoreCardRow.tsx b/src/components/ScoreCardRow.tsx
index 63303ebc..ad0dbe6e 100644
--- a/src/components/ScoreCardRow.tsx
+++ b/src/components/ScoreCardRow.tsx
@@ -51,7 +51,6 @@ export default function ScoreCardRow({
         </div>
         {isExpanded &&
           <div className={clsx(
-            // 'overflow-auto w-full flex flex-col min-w-0',
             'text-medium leading-relaxed',
           )}>
             {expandContent}