fix(org): reserve a secret row's menu column only once a row has a menu

Author: waleedlatif1

apps/sim/platform/embedded/app/(shell)/integrations/_components/secrets-editor/secret-rows.tsx

@@ -101,20 +101,22 @@ interface SecretRowMenuProps {
 
 function SecretRowMenu({ name, onDelete }: SecretRowMenuProps) {
   return (
-    <ActionMenu
-      label='Secret actions'
-      icon='I108'
-      actions={[
-        { id: 'copy', label: 'Copy name', onSelect: () => copySecretName(name) },
-        {
-          id: 'delete',
-          label: 'Delete',
-          destructive: true,
-          separatorBefore: true,
-          onSelect: onDelete,
-        },
-      ]}
-    />
+    <span className={styles.menu}>
+      <ActionMenu
+        label='Secret actions'
+        icon='I108'
+        actions={[
+          { id: 'copy', label: 'Copy name', onSelect: () => copySecretName(name) },
+          {
+            id: 'delete',
+            label: 'Delete',
+            destructive: true,
+            separatorBefore: true,
+            onSelect: onDelete,
+          },
+        ]}
+      />
+    </span>
   )
 }
 
@@ -204,7 +206,7 @@ export function NewRow({ envVar, index, onUpdate, onPaste }: NewRowProps) {
           }}
         />
       ) : (
-        <span />
+        <span className={styles.menuSlot} />
       )}
       {keyError && (
         <p className={styles.rowError} data-type='T052' role='alert'>

apps/sim/platform/embedded/app/(shell)/integrations/_components/secrets-editor/secrets-editor.module.css

@@ -7,6 +7,14 @@
   min-inline-size: 0;
 }
 
+/* Rows hold a column for their menu only once one has it, so a lone blank row meets the card's edge. */
+.rows:not(:has(> .menu)) {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+.rows:not(:has(> .menu)) > .menuSlot {
+  display: none;
+}
+
 .rowError {
   grid-column: 1 / -1;
   color: var(--control-danger);