From b51e37f22162fb3a538491cb4d5fe1c172520fbc Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 24 Oct 2025 14:53:07 -0700
Subject: [PATCH] Try fix folder variable pane layout

---
 src-web/components/EnvironmentEditor.tsx  | 43 ++++++++++++-----------
 src-web/components/core/tree/TreeItem.tsx | 11 ++----
 2 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/src-web/components/EnvironmentEditor.tsx b/src-web/components/EnvironmentEditor.tsx
index 623f5988..88ce92ba 100644
--- a/src-web/components/EnvironmentEditor.tsx
+++ b/src-web/components/EnvironmentEditor.tsx
@@ -1,6 +1,7 @@
 import type { Environment } from '@yaakapp-internal/models';
 import { patchModel } from '@yaakapp-internal/models';
 import type { GenericCompletionOption } from '@yaakapp-internal/plugins';
+import classNames from 'classnames';
 import React, { useCallback, useMemo } from 'react';
 import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
 import { useIsEncryptionEnabled } from '../hooks/useIsEncryptionEnabled';
@@ -19,7 +20,6 @@ import { Heading } from './core/Heading';
 import type { PairWithId } from './core/PairEditor';
 import { ensurePairId } from './core/PairEditor.util';
 import { PairOrBulkEditor } from './core/PairOrBulkEditor';
-import { VStack } from './core/Stacks';
 import { EnvironmentColorIndicator } from './EnvironmentColorIndicator';
 import { EnvironmentSharableTooltip } from './EnvironmentSharableTooltip';
 
@@ -98,7 +98,7 @@ export function EnvironmentEditor({
   };
 
   return (
-    <VStack space={4} className={className}>
+    <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>}
@@ -127,7 +127,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,24 +142,25 @@ export function EnvironmentEditor({
         >
           This sharable environment contains plain-text secrets
         </DismissibleBanner>
+      ) : (
+        <span />
       )}
-      <div className="h-full pr-2 pb-2 grid grid-rows-[minmax(0,1fr)] overflow-auto">
-        <PairOrBulkEditor
-          allowMultilineValues
-          preferenceName="environment"
-          nameAutocomplete={nameAutocomplete}
-          namePlaceholder="VAR_NAME"
-          nameValidate={validateName}
-          valueType={valueType}
-          valueAutocompleteVariables='environment'
-          valueAutocompleteFunctions
-          forceUpdateKey={`${environment.id}::${forceUpdateKey}`}
-          pairs={environment.variables}
-          onChange={handleChange}
-          stateKey={`environment.${environment.id}`}
-          forcedEnvironmentId={environment.id}
-        />
-      </div>
-    </VStack>
+      <PairOrBulkEditor
+        className="h-full"
+        allowMultilineValues
+        preferenceName="environment"
+        nameAutocomplete={nameAutocomplete}
+        namePlaceholder="VAR_NAME"
+        nameValidate={validateName}
+        valueType={valueType}
+        valueAutocompleteVariables="environment"
+        valueAutocompleteFunctions
+        forceUpdateKey={`${environment.id}::${forceUpdateKey}`}
+        pairs={environment.variables}
+        onChange={handleChange}
+        stateKey={`environment.${environment.id}`}
+        forcedEnvironmentId={environment.id}
+      />
+    </div>
   );
 }
diff --git a/src-web/components/core/tree/TreeItem.tsx b/src-web/components/core/tree/TreeItem.tsx
index 36fa7694..18235681 100644
--- a/src-web/components/core/tree/TreeItem.tsx
+++ b/src-web/components/core/tree/TreeItem.tsx
@@ -3,8 +3,8 @@ import { useDndMonitor, useDraggable, useDroppable } from '@dnd-kit/core';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
 import { selectAtom } from 'jotai/utils';
-import type { MouseEvent, PointerEvent, ReactElement, RefAttributes } from 'react';
-import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { MouseEvent, PointerEvent } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { computeSideForDragMove } from '../../../lib/dnd';
 import { jotaiStore } from '../../../lib/jotai';
 import type { ContextMenuProps, DropdownItem } from '../Dropdown';
@@ -40,7 +40,7 @@ export interface TreeItemHandle {
 
 const HOVER_CLOSED_FOLDER_DELAY = 800;
 
-function TreeItemInner<T extends { id: string }>({
+function TreeItem_<T extends { id: string }>({
   treeId,
   node,
   ItemInner,
@@ -325,11 +325,6 @@ function TreeItemInner<T extends { id: string }>({
   );
 }
 
-// 1) Preserve generics through forwardRef:
-const TreeItem_ = forwardRef(TreeItemInner) as <T extends { id: string }>(
-  props: TreeItemProps<T> & RefAttributes<TreeItemHandle>,
-) => ReactElement | null;
-
 export const TreeItem = memo(
   TreeItem_,
   ({ node: prevNode, ...prevProps }, { node: nextNode, ...nextProps }) => {