Better CSS

src-web/components/EnvironmentEditor.tsx

@@ -98,7 +98,8 @@ export function EnvironmentEditor({
   };
 
   return (
-    <div className={classNames(className, 'h-full grid grid-rows-[auto_auto_minmax(0,1fr)] gap-2')}>
+    <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>}
@@ -127,7 +128,7 @@ export function EnvironmentEditor({
             {environment.public ? 'Sharable' : 'Private'}
           </BadgeButton>
         </Heading>
-      {environment.public && (!isEncryptionEnabled || !allVariableAreEncrypted) ? (
+        {environment.public && (!isEncryptionEnabled || !allVariableAreEncrypted) && (
           <DismissibleBanner
             id={`warn-unencrypted-${environment.id}`}
             color="notice"
@@ -142,9 +143,8 @@ export function EnvironmentEditor({
           >
             This sharable environment contains plain-text secrets
           </DismissibleBanner>
-      ) : (
-        <span />
         )}
+      </div>
       <PairOrBulkEditor
         className="h-full"
         allowMultilineValues