Better environment edit dialog

src-web/components/core/Button.tsx

@@ -51,6 +51,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       classNames(
         className,
         'max-w-full min-w-0', // Help with truncation
+        'hocus:opacity-100', // Force opacity for certain hover effects
         'whitespace-nowrap outline-none',
         'flex-shrink-0 flex items-center',
         'focus-visible-or-class:ring rounded-md',

src-web/components/core/Dialog.tsx

@@ -14,8 +14,9 @@ export interface DialogProps {
   title?: ReactNode;
   description?: ReactNode;
   className?: string;
-  size?: 'sm' | 'md' | 'full' | 'dynamic';
+  size?: 'sm' | 'md' | 'lg' | 'full' | 'dynamic';
   hideX?: boolean;
+  noPadding?: boolean;
 }
 
 export function Dialog({
@@ -27,6 +28,7 @@ export function Dialog({
   title,
   description,
   hideX,
+  noPadding,
 }: DialogProps) {
   const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
   const descriptionId = useMemo(
@@ -50,30 +52,36 @@ export function Dialog({
             animate={{ top: 0, scale: 1 }}
             className={classNames(
               className,
-              'gap-2 grid grid-rows-[auto_minmax(0,1fr)]',
-              'pt-4 relative bg-gray-50 pointer-events-auto',
+              'grid grid-rows-[auto_minmax(0,1fr)]',
+              'relative bg-gray-50 pointer-events-auto',
               'rounded-lg',
               'dark:border border-highlight shadow shadow-black/10',
               'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
               size === 'sm' && 'w-[25rem] max-h-[80vh]',
               size === 'md' && 'w-[45rem] max-h-[80vh]',
+              size === 'lg' && 'w-[65rem] max-h-[80vh]',
               size === 'full' && 'w-[100vw] h-[100vh]',
               size === 'dynamic' && 'min-w-[30vw] max-w-[80vw]',
             )}
           >
             {title ? (
-              <Heading className="px-6 pt-4" size={1} id={titleId}>
+              <Heading className="px-6 mt-4 mb-2" size={1} id={titleId}>
                 {title}
               </Heading>
             ) : (
               <span />
             )}
             {description && (
-              <p className="px-6" id={descriptionId}>
+              <p className="px-6 text-gray-700" id={descriptionId}>
                 {description}
               </p>
             )}
-            <div className="h-full w-full grid grid-cols-[minmax(0,1fr)] overflow-y-auto px-6 py-2">
+            <div
+              className={classNames(
+                'h-full w-full grid grid-cols-[minmax(0,1fr)] overflow-y-auto',
+                !noPadding && 'px-6 py-2',
+              )}
+            >
               {children}
             </div>
 

src-web/components/core/PairEditor.tsx

@@ -329,7 +329,7 @@ const FormRow = memo(function FormRow({
             'justify-center opacity-0 group-hover:opacity-70',
           )}
         >
-          <Icon icon="gripVertical" className="pointer-events-none" />
+          <Icon size="sm" icon="gripVertical" className="pointer-events-none" />
         </div>
       ) : (
         <span className="w-3" />
@@ -425,6 +425,7 @@ const FormRow = memo(function FormRow({
         color="custom"
         icon={!isLast ? 'trash' : 'empty'}
         size="sm"
+        iconSize="sm"
         title="Delete header"
         onClick={!isLast ? handleDelete : undefined}
         className="ml-0.5 opacity-0 group-hover:!opacity-100 focus-visible:!opacity-100"

src-web/components/core/SplitLayout.tsx

@@ -23,7 +23,7 @@ interface Props {
   defaultRatio?: number;
   minHeightPx?: number;
   minWidthPx?: number;
-  forceVertical?: boolean;
+  layout?: 'responsive' | 'vertical' | 'horizontal';
 }
 
 const areaL = { gridArea: 'left' };
@@ -38,13 +38,13 @@ export function SplitLayout({
   secondSlot,
   className,
   name,
-  forceVertical,
+  layout = 'responsive',
   defaultRatio = 0.5,
   minHeightPx = 10,
   minWidthPx = 10,
 }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [vertical, setVertical] = useState<boolean>(false);
+  const [verticalBasedOnSize, setVerticalBasedOnSize] = useState<boolean>(false);
   const [widthRaw, setWidth] = useLocalStorage<number>(`${name}_width::${useActiveWorkspaceId()}`);
   const [heightRaw, setHeight] = useLocalStorage<number>(
     `${name}_height::${useActiveWorkspaceId()}`,
@@ -62,26 +62,27 @@ export function SplitLayout({
   }
 
   useResizeObserver(containerRef.current, ({ contentRect }) => {
-    setVertical(contentRect.width < STACK_VERTICAL_WIDTH);
+    setVerticalBasedOnSize(contentRect.width < STACK_VERTICAL_WIDTH);
   });
 
+  const vertical = layout !== 'horizontal' && (layout === 'vertical' || verticalBasedOnSize);
+
   const styles = useMemo<CSSProperties>(() => {
     return {
       ...style,
-      gridTemplate:
-        forceVertical || vertical
-          ? `
+      gridTemplate: vertical
+        ? `
             ' ${areaL.gridArea}' minmax(0,${1 - height}fr)
             ' ${areaD.gridArea}' 0
             ' ${areaR.gridArea}' minmax(${minHeightPx}px,${height}fr)
             / 1fr            
           `
-          : `
+        : `
             ' ${areaL.gridArea} ${areaD.gridArea} ${areaR.gridArea}' minmax(0,1fr)
             / ${1 - width}fr   0                ${width}fr           
           `,
     };
-  }, [forceVertical, style, vertical, height, minHeightPx, width]);
+  }, [style, vertical, height, minHeightPx, width]);
 
   const unsub = () => {
     if (moveState.current !== null) {
@@ -154,7 +155,7 @@ export function SplitLayout({
           <ResizeHandle
             style={areaD}
             isResizing={isResizing}
-            className={classNames(vertical ? 'translate-y-0.5' : 'translate-x-0.5')}
+            className={classNames(vertical ? '-translate-y-1.5' : '-translate-x-1.5')}
             onResizeStart={handleResizeStart}
             onReset={handleReset}
             side={vertical ? 'top' : 'left'}