Started on grid layout

src-web/components/Button.tsx

@@ -4,7 +4,7 @@ import { Icon } from './Icon';
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   color?: 'primary' | 'secondary';
-  size?: 'sm' | 'md';
+  size?: 'xs' | 'sm' | 'md';
   justify?: 'start' | 'center';
   forDropdown?: boolean;
 };
@@ -31,6 +31,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         justify === 'center' && 'justify-center',
         size === 'md' && 'h-10 px-4',
         size === 'sm' && 'h-8 px-3 text-sm',
+        size === 'xs' && 'h-6 px-2 text-sm',
         color === undefined &&
           'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15] text-gray-800 hover:text-gray-900',
         color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80 text-white',

src-web/components/Editor/Editor.css

@@ -1,12 +1,28 @@
-.cm-editor {
+.cm-wrapper {
+    height: 100%;
     width: 100%;
-    overflow: hidden;
+    position: relative;
+}
+
+.cm-editor {
+    position: absolute !important;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     border-radius: var(--border-radius-lg);
+    border: 1px solid hsl(var(--color-gray-50));
+    font-size: 0.9rem;
+}
+
+.cm-editor.cm-focused {
+    outline: none !important;
+    border-color: hsl(var(--color-gray-100));
 }
 
 .cm-editor .cm-scroller {
     border-radius: var(--border-radius-lg);
-    background-color: hsl(var(--color-gray-50) / 0.5);
+    background-color: hsl(var(--color-gray-50));
 }
 
 .cm-editor .cm-line {
@@ -16,7 +32,7 @@
 }
 
 .cm-editor .cm-gutters {
-    background-color: transparent;
+    background-color: hsl(var(--color-gray-50));
     border-right: 0;
     color: hsl(var(--color-gray-300));
 }

src-web/components/Editor/Editor.tsx

@@ -8,5 +8,5 @@ interface Props {
 
 export default function Editor(props: Props) {
   const { ref } = useCodeMirror({ value: props.value, contentType: props.contentType });
-  return <div ref={ref} className="m-0 text-sm overflow-hidden" />;
+  return <div ref={ref} className="cm-wrapper" />;
 }

src-web/components/Grid.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import {HTMLAttributes} from 'react';
+import { HTMLAttributes } from 'react';
 
 const colsClasses = {
   none: 'grid-cols-none',
@@ -28,7 +28,12 @@ type Props = HTMLAttributes<HTMLElement> & {
 export function Grid({ className, cols, gap, ...props }: Props) {
   return (
     <div
-      className={classnames(className, 'grid', cols && colsClasses[cols], gap && gapClasses[gap])}
+      className={classnames(
+        className,
+        'grid w-full',
+        cols && colsClasses[cols],
+        gap && gapClasses[gap],
+      )}
       {...props}
     />
   );

src-web/components/Input.tsx

@@ -2,20 +2,24 @@ import { InputHTMLAttributes, ReactNode } from 'react';
 import classnames from 'classnames';
 import { HStack, VStack } from './Stacks';
 
-interface Props extends InputHTMLAttributes<HTMLInputElement> {
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   name: string;
   label: string;
   hideLabel?: boolean;
   labelClassName?: string;
+  containerClassName?: string;
   leftSlot?: ReactNode;
   rightSlot?: ReactNode;
+  size?: 'sm' | 'md';
 }
 
 export function Input({
   label,
-  labelClassName,
   hideLabel,
   className,
+  containerClassName,
+  labelClassName,
+  size = 'md',
   name,
   leftSlot,
   rightSlot,
@@ -23,15 +27,12 @@ export function Input({
 }: Props) {
   const id = `input-${name}`;
   return (
-    <HStack items="center" className="w-full bg-gray-50 h-10 rounded-md text-sm ">
+    <HStack
+      items="center"
+      className={classnames(containerClassName, 'w-full bg-gray-50 rounded-md text-sm')}
+    >
       {leftSlot}
-      <VStack
-        className={classnames(
-          'w-full border-gray-100/50',
-          leftSlot && 'border-l ml-0.5',
-          rightSlot && 'border-r mr-0.5',
-        )}
-      >
+      <VStack className={classnames('w-full border-gray-100/50')}>
         <label
           htmlFor={name}
           className={classnames(
@@ -46,7 +47,11 @@ export function Input({
           id={id}
           className={classnames(
             className,
-            'bg-transparent min-w-0 pl-3 pr-2 w-full h-full focus:outline-none',
+            'bg-transparent min-w-0 pl-3 pr-2 w-full focus:outline-none',
+            leftSlot && 'pl-1',
+            rightSlot && 'pr-1',
+            size === 'md' && 'h-10',
+            size === 'sm' && 'h-8',
           )}
           {...props}
         />

src-web/components/UrlBar.tsx

@@ -28,12 +28,13 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
   };
 
   return (
-    <HStack as="form" className="items-end" onSubmit={handleSendRequest} space={2}>
+    <form onSubmit={handleSendRequest} className="w-full flex items-center">
       <Input
         hideLabel
+        size="sm"
         name="url"
         label="Enter URL"
-        className="font-mono pr-12"
+        className="font-mono"
         onChange={(e) => onUrlChange(e.currentTarget.value)}
         value={url}
         placeholder="Enter a URL..."
@@ -47,7 +48,7 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
               { label: 'POST', value: 'POST' },
             ]}
           >
-            <Button disabled={loading} forDropdown size="sm" className="ml-1 w-22" justify="start">
+            <Button disabled={loading} size="xs" className="ml-1" justify="start">
               {method.label}
             </Button>
           </DropdownMenuRadio>
@@ -57,11 +58,11 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
             icon={loading ? 'update' : 'paper-plane'}
             spin={loading}
             disabled={loading}
-            size="sm"
-            className="w-10 mr-1"
+            size="xs"
+            className="mr-1"
           />
         }
       />
-    </HStack>
+    </form>
   );
 }