From b19e036a61156813d9e084afa7c07c815a7f92dd Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 24 Oct 2025 15:06:08 -0700
Subject: [PATCH] Better CSS

---
 src-web/components/EnvironmentEditor.tsx | 86 ++++++++++++------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/src-web/components/EnvironmentEditor.tsx b/src-web/components/EnvironmentEditor.tsx
index 88ce92ba..5c4fa694 100644
--- a/src-web/components/EnvironmentEditor.tsx
+++ b/src-web/components/EnvironmentEditor.tsx
@@ -98,53 +98,53 @@ export function EnvironmentEditor({
   };
 
   return (
-    <div className={classNames(className, 'h-full grid grid-rows-[auto_auto_minmax(0,1fr)] gap-2')}>
-      <Heading className="w-full flex items-center gap-0.5">
-        <EnvironmentColorIndicator clickToEdit environment={environment ?? null} />
-        {!hideName && <div className="mr-2">{environment?.name}</div>}
-        {isEncryptionEnabled ? (
-          !allVariableAreEncrypted ? (
-            <BadgeButton color="notice" onClick={() => encryptEnvironment(environment)}>
-              Encrypt All Variables
-            </BadgeButton>
+    <div className={classNames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] gap-2')}>
+      <div className="flex flex-col gap-4">
+        <Heading className="w-full flex items-center gap-0.5">
+          <EnvironmentColorIndicator clickToEdit environment={environment ?? null} />
+          {!hideName && <div className="mr-2">{environment?.name}</div>}
+          {isEncryptionEnabled ? (
+            !allVariableAreEncrypted ? (
+              <BadgeButton color="notice" onClick={() => encryptEnvironment(environment)}>
+                Encrypt All Variables
+              </BadgeButton>
+            ) : (
+              <BadgeButton color="secondary" onClick={setupOrConfigureEncryption}>
+                Encryption Settings
+              </BadgeButton>
+            )
           ) : (
-            <BadgeButton color="secondary" onClick={setupOrConfigureEncryption}>
-              Encryption Settings
+            <BadgeButton color="secondary" onClick={() => valueVisibility.set((v) => !v)}>
+              {valueVisibility.value ? 'Hide Values' : 'Show Values'}
             </BadgeButton>
-          )
-        ) : (
-          <BadgeButton color="secondary" onClick={() => valueVisibility.set((v) => !v)}>
-            {valueVisibility.value ? 'Hide Values' : 'Show Values'}
+          )}
+          <BadgeButton
+            color="secondary"
+            rightSlot={<EnvironmentSharableTooltip />}
+            onClick={async () => {
+              await patchModel(environment, { public: !environment.public });
+            }}
+          >
+            {environment.public ? 'Sharable' : 'Private'}
           </BadgeButton>
+        </Heading>
+        {environment.public && (!isEncryptionEnabled || !allVariableAreEncrypted) && (
+          <DismissibleBanner
+            id={`warn-unencrypted-${environment.id}`}
+            color="notice"
+            className="mr-3"
+            actions={[
+              {
+                label: 'Encrypt Variables',
+                onClick: () => encryptEnvironment(environment),
+                color: 'success',
+              },
+            ]}
+          >
+            This sharable environment contains plain-text secrets
+          </DismissibleBanner>
         )}
-        <BadgeButton
-          color="secondary"
-          rightSlot={<EnvironmentSharableTooltip />}
-          onClick={async () => {
-            await patchModel(environment, { public: !environment.public });
-          }}
-        >
-          {environment.public ? 'Sharable' : 'Private'}
-        </BadgeButton>
-      </Heading>
-      {environment.public && (!isEncryptionEnabled || !allVariableAreEncrypted) ? (
-        <DismissibleBanner
-          id={`warn-unencrypted-${environment.id}`}
-          color="notice"
-          className="mr-3"
-          actions={[
-            {
-              label: 'Encrypt Variables',
-              onClick: () => encryptEnvironment(environment),
-              color: 'success',
-            },
-          ]}
-        >
-          This sharable environment contains plain-text secrets
-        </DismissibleBanner>
-      ) : (
-        <span />
-      )}
+      </div>
       <PairOrBulkEditor
         className="h-full"
         allowMultilineValues