From 3afafb47a4ec46c17b0e66c8515c1604d66b3b59 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 15 Feb 2025 22:50:10 -0600
Subject: [PATCH] Fix copy button alignment

---
 src/admin/insights/AdminAppInsightsClient.tsx | 4 ++--
 src/app-core/SecretGenerator.tsx              | 4 +---
 src/components/CopyButton.tsx                 | 4 +++-
 src/components/EnvVar.tsx                     | 7 ++++++-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/admin/insights/AdminAppInsightsClient.tsx b/src/admin/insights/AdminAppInsightsClient.tsx
index ce7a21a1..392d0e17 100644
--- a/src/admin/insights/AdminAppInsightsClient.tsx
+++ b/src/admin/insights/AdminAppInsightsClient.tsx
@@ -215,7 +215,7 @@ export default function AdminAppInsightsClient({
             />}
             content="Speed up page load times"
             expandContent={<>
-              Dramatically improve load times by enabling static optimization
+              Improve load times by enabling static optimization
               {' '}
               on:
               <div className="flex flex-col gap-y-4 mt-3">
@@ -236,7 +236,7 @@ export default function AdminAppInsightsClient({
                   'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORY_OG_IMAGES',
                 )}
                 <span>
-                  See {readmeAnchor('performance')} for cost considerations.
+                  See {readmeAnchor('performance')} for cost implications.
                 </span>
               </div>
             </>}
diff --git a/src/app-core/SecretGenerator.tsx b/src/app-core/SecretGenerator.tsx
index c85452d6..4f74c706 100644
--- a/src/app-core/SecretGenerator.tsx
+++ b/src/app-core/SecretGenerator.tsx
@@ -30,9 +30,7 @@ export default function SecretGenerator() {
           'flex flex-nowrap items-center gap-2 leading-none -mx-1',
         )}>
           {secret ? <span>{secret}</span> : <Spinner />}
-          <div
-            className="flex items-center gap-0.5 translate-y-[-2px]"
-          >
+          <div className="flex items-center gap-0.5 translate-y-[-0.5px]">
             <CopyButton label="Secret" text={secret} />
           </div>
         </div>
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
index 7c4fa939..5ba6bacd 100644
--- a/src/components/CopyButton.tsx
+++ b/src/components/CopyButton.tsx
@@ -7,17 +7,19 @@ export default function CopyButton({
   label,
   text,
   subtle,
+  className,
 }: {
   label: string
   text?: string,
   subtle?: boolean
+  className?: string
 }) {
   return (
     <LoaderButton
       icon={<BiCopy size={15} />}
       className={clsx(
-        'translate-y-[2px]',
         subtle && 'text-gray-300 dark:text-gray-700',
+        className,
       )}
       onClick={text
         ? () => {
diff --git a/src/components/EnvVar.tsx b/src/components/EnvVar.tsx
index 4f26fc82..eeecd836 100644
--- a/src/components/EnvVar.tsx
+++ b/src/components/EnvVar.tsx
@@ -28,7 +28,12 @@ export default function EnvVar({
           {variable}{value && ` = ${value}`}
         </span>
         {includeCopyButton &&
-          <CopyButton label={variable} text={variable} subtle />}
+          <CopyButton
+            className="translate-y-[0.5px]"
+            label={variable}
+            text={variable}
+            subtle
+          />}
       </span>
     </div>
   );