Even better layouts

src-web/components/RequestResponse.tsx

@@ -2,16 +2,25 @@ import classnames from 'classnames';
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useKeyValue } from '../hooks/useKeyValue';
+import { clamp } from '../lib/clamp';
 import { RequestPane } from './RequestPane';
 import { ResponsePane } from './ResponsePane';
 import { ResizeBar } from './Workspace';
 
+interface Props {
+  style: CSSProperties;
+  vertical?: boolean;
+}
+
 const rqst = { gridArea: 'rqst' };
 const resp = { gridArea: 'resp' };
 const drag = { gridArea: 'drag' };
 
-export default function RequestResponse() {
-  const DEFAULT = 0.5;
+const DEFAULT = 0.5;
+const MIN_WIDTH_PX = 10;
+const MIN_HEIGHT_PX = 100;
+
+export default function RequestResponse({ style, vertical }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const widthKv = useKeyValue<number>({ key: 'body_width', defaultValue: DEFAULT });
   const heightKv = useKeyValue<number>({ key: 'body_height', defaultValue: DEFAULT });
@@ -22,14 +31,14 @@ export default function RequestResponse() {
     null,
   );
 
-  const vertical = false;
   const styles = useMemo<CSSProperties>(
     () => ({
+      ...style,
       gridTemplate: vertical
         ? `
-          ' ${rqst.gridArea}' ${1 - height}fr
+          ' ${rqst.gridArea}' minmax(0,${1 - height}fr)
           ' ${drag.gridArea}' auto
-          ' ${resp.gridArea}' ${height}fr
+          ' ${resp.gridArea}' minmax(0,${height}fr)
           / 1fr            
         `
         : `
@@ -37,7 +46,7 @@ export default function RequestResponse() {
           / ${1 - width}fr   auto             ${width}fr           
         `,
     }),
-    [vertical, width, height],
+    [vertical, width, height, style],
   );
 
   const unsub = () => {
@@ -68,13 +77,21 @@ export default function RequestResponse() {
         move: (e: MouseEvent) => {
           e.preventDefault(); // Prevent text selection and things
           if (vertical) {
-            const newHeightPx = startHeight - (e.clientY - mouseStartY);
-            const newHeight = newHeightPx / containerRect.height;
-            heightKv.set(newHeight);
+            const maxHeightPx = containerRect.height - MIN_HEIGHT_PX;
+            const newHeightPx = clamp(
+              startHeight - (e.clientY - mouseStartY),
+              MIN_HEIGHT_PX,
+              maxHeightPx,
+            );
+            heightKv.set(newHeightPx / containerRect.height);
           } else {
-            const newWidthPx = startWidth - (e.clientX - mouseStartX);
-            const newWidth = newWidthPx / containerRect.width;
-            widthKv.set(newWidth);
+            const maxWidthPx = containerRect.width - MIN_WIDTH_PX;
+            const newWidthPx = clamp(
+              startWidth - (e.clientX - mouseStartX),
+              MIN_WIDTH_PX,
+              maxWidthPx,
+            );
+            widthKv.set(newWidthPx / containerRect.width);
           }
         },
         up: (e: MouseEvent) => {
@@ -93,9 +110,9 @@ export default function RequestResponse() {
   return (
     <div ref={containerRef} className="grid w-full h-full p-3" style={styles}>
       <div style={rqst}>
-        <RequestPane fullHeight />
+        <RequestPane fullHeight={!vertical} />
       </div>
-      <div style={drag} className={classnames('relative', vertical ? 'h-3' : 'w-3')}>
+      <div style={drag} className={classnames('relative flex-grow-0', vertical ? 'h-3' : 'w-3')}>
         <ResizeBar
           isResizing={isResizing}
           onResizeStart={handleResizeStart}

src-web/components/Workspace.tsx

@@ -11,6 +11,8 @@ const side = { gridArea: 'side' };
 const head = { gridArea: 'head' };
 const body = { gridArea: 'body' };
 
+const FLOATING_SIDEBAR_BREAKPOINT = 960;
+
 export default function Workspace() {
   const windowSize = useWindowSize();
   const styles = useMemo<CSSProperties>(
@@ -26,23 +28,17 @@ export default function Workspace() {
 
   return (
     <div className="grid w-full h-full" style={styles}>
-      <SidebarContainer style={side} floating={windowSize.width < 800}>
+      <SidebarContainer style={side} floating={windowSize.width < FLOATING_SIDEBAR_BREAKPOINT}>
         <Sidebar />
       </SidebarContainer>
       <HeaderContainer>
         <WorkspaceHeader className="pointer-events-none" />
       </HeaderContainer>
-      <BodyContainer>
-        <RequestResponse />
-      </BodyContainer>
+      <RequestResponse style={body} vertical={windowSize.width < FLOATING_SIDEBAR_BREAKPOINT} />
     </div>
   );
 }
 
-const BodyContainer = memo(function BodyContainer({ children }: { children: ReactNode }) {
-  return <div style={body}>{children}</div>;
-});
-
 const HeaderContainer = memo(function HeaderContainer({ children }: { children: ReactNode }) {
   return (
     <div

src-web/components/WorkspaceDropdown.tsx

@@ -57,7 +57,11 @@ export const WorkspaceDropdown = memo(function WorkspaceDropdown({ className }:
 
   return (
     <Dropdown items={items}>
-      <Button size="sm" className={classnames(className, '!px-2 truncate')} forDropdown>
+      <Button
+        size="sm"
+        className={classnames(className, 'text-gray-800 !px-2 truncate')}
+        forDropdown
+      >
         {activeWorkspace?.name}
       </Button>
     </Dropdown>

src-web/components/WorkspaceHeader.tsx

@@ -25,7 +25,7 @@ export function WorkspaceHeader({ className }: Props) {
         />
         <WorkspaceDropdown className="pointer-events-auto" />
       </HStack>
-      <div className="flex-[2] text-center text-gray-700 text-sm truncate pointer-events-none">
+      <div className="flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none">
         {activeRequest?.name}
       </div>
       <div className="flex-1 flex justify-end -mr-2 pointer-events-none">

src-web/components/core/Editor/Editor.css

@@ -17,7 +17,7 @@
         }
 
         .cm-line {
-            @apply text-gray-900 pl-1 pr-1.5;
+            @apply text-gray-800 pl-1 pr-1.5;
         }
 
         .cm-placeholder {

src-web/components/core/Tabs/Tabs.tsx

@@ -69,6 +69,9 @@ export function Tabs<T>({
         <HStack space={1}>
           {tabs.map((t) => {
             const isActive = t.value === value;
+            const btnClassName = classnames(
+              isActive ? 'bg-gray-100 text-gray-800' : 'text-gray-600 hover:text-gray-900',
+            );
             if (t.options) {
               return (
                 <RadioDropdown
@@ -81,9 +84,7 @@ export function Tabs<T>({
                     color="custom"
                     size="sm"
                     onClick={isActive ? undefined : () => handleTabChange(t.value)}
-                    className={classnames(
-                      isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
-                    )}
+                    className={btnClassName}
                   >
                     {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
                     <Icon icon="triangleDown" className="-mr-1.5" />
@@ -97,9 +98,7 @@ export function Tabs<T>({
                   color="custom"
                   size="sm"
                   onClick={() => handleTabChange(t.value)}
-                  className={classnames(
-                    isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
-                  )}
+                  className={btnClassName}
                 >
                   {t.label}
                 </Button>