From a5af7c617c4d7908d0a7c108de02716e57cbdce6 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 12 Sep 2025 17:12:59 -0500
Subject: [PATCH] Optimize environment variable warning

---
 src/admin/insights/AdminAppInsightsClient.tsx | 16 +++++++++++-----
 src/components/ImageInput.tsx                 |  2 +-
 src/components/ScoreCardRow.tsx               |  8 +++++++-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/admin/insights/AdminAppInsightsClient.tsx b/src/admin/insights/AdminAppInsightsClient.tsx
index 87b3759e..3f30db8b 100644
--- a/src/admin/insights/AdminAppInsightsClient.tsx
+++ b/src/admin/insights/AdminAppInsightsClient.tsx
@@ -269,17 +269,23 @@ export default function AdminAppInsightsClient({
                 !isExpanded,
               )}
               expandContent={<div className="flex flex-col gap-2">
-                Future versions of this template will not build correctly
-                when including the following deprecated environment variables:
+                Future versions of this template may not build correctly
+                with the following deprecated environment variables:
                 <div className="space-y-1">
                   {usedDeprecatedEnvVars.map(({ old, replacement }) => (
                     <MaskedScroll
                       key={old}
-                      className="flex items-center gap-2"
+                      className={clsx(
+                        'inline-flex items-center gap-3',
+                        'overflow-y-hidden',
+                      )}
                       direction="horizontal"
                     >
-                      <div className="text-xs text-dim">{old}</div>
-                      <FaArrowRight size={11} className="shrink-0" />
+                      <div className="text-xs font-medium">{old}</div>
+                      <FaArrowRight
+                        size={11}
+                        className="shrink-0 text-extra-dim"
+                      />
                       <EnvVar variable={replacement} maskScroll={false} />
                     </MaskedScroll>
                   ))}
diff --git a/src/components/ImageInput.tsx b/src/components/ImageInput.tsx
index e771edbc..35993005 100644
--- a/src/components/ImageInput.tsx
+++ b/src/components/ImageInput.tsx
@@ -132,7 +132,7 @@ export default function ImageInput({
                     '2d', { colorSpace: 'display-p3' },
                   );
 
-                  if ((shouldResize || isPng) && canvas && ctx) {
+                  if (shouldResize && canvas && ctx) {
                     // Process images that need resizing
                     const image = await blobToImage(file);
 
diff --git a/src/components/ScoreCardRow.tsx b/src/components/ScoreCardRow.tsx
index 6eb06fd8..97fa05a8 100644
--- a/src/components/ScoreCardRow.tsx
+++ b/src/components/ScoreCardRow.tsx
@@ -41,9 +41,15 @@ export default function ScoreCardRow({
       )}>
         {icon}
       </div>
-      <div className="grow space-y-2 py-1.5 w-full overflow-auto">
+      <div className={clsx(
+        'grow space-y-2 py-1.5 w-full overflow-auto',
+        // Allowing expanded content to flow under expand button
+        expandContent && isExpanded && '-mr-6',
+      )}>
         <div className={clsx(
           'text-main pr-2',
+          // Correct for expanded content in section title
+          expandContent && isExpanded && 'mr-6',
           expandContent && !isExpanded && 'max-w-full truncate',
         )}>
           {typeof content === 'function'