Optimize environment variable warning

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
+                Future versions of this template may not build correctly
-                when including the following deprecated environment variables:
+                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>
+                      <div className="text-xs font-medium">{old}</div>
-                      <FaArrowRight size={11} className="shrink-0" />
+                      <FaArrowRight
+                        size={11}
+                        className="shrink-0 text-extra-dim"
+                      />
                       <EnvVar variable={replacement} maskScroll={false} />
                     </MaskedScroll>
                   ))}

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

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'