Minor style tweaks

src-web/components/DropMarker.tsx

@@ -1,10 +1,20 @@
+import classnames from 'classnames';
 import React, { memo } from 'react';
 
+interface Props {
+  className?: string;
+}
+
 export const DropMarker = memo(
-  function DropMarker() {
+  function DropMarker({ className }: Props) {
     return (
-      <div className="relative w-full h-0 overflow-visible pointer-events-none">
+      <div
-        <div className="absolute z-50 left-2 right-2 bottom-[1px] h-[0.2em] bg-blue-500/50 rounded-full" />
+        className={classnames(
+          className,
+          'relative w-full h-0 overflow-visible pointer-events-none',
+        )}
+      >
+        <div className="absolute z-50 left-2 right-2 -bottom-[0.1rem] h-[0.2rem] bg-blue-500/50 rounded-full" />
       </div>
     );
   },

src-web/components/RequestMethodDropdown.tsx

@@ -20,7 +20,7 @@ export const RequestMethodDropdown = memo(function RequestMethodDropdown({
 }: Props) {
   return (
     <RadioDropdown value={method} items={methodItems} onChange={onChange}>
-      <Button size="sm" className={className}>
+      <Button size="xs" className={className}>
         {method.toUpperCase()}
       </Button>
     </RadioDropdown>

src-web/components/RequestPane.tsx

@@ -81,6 +81,11 @@ export function RequestPane({ fullHeight, className }: Props) {
             tabListClassName="pl-3"
             label="Request body"
           >
+            <TabContent value="auth">
+              <div className="flex items-center justify-center min-h-[5rem]">
+                <header>Hello</header>
+              </div>
+            </TabContent>
             <TabContent value="headers">
               <HeaderEditor
                 key={activeRequestId}

src-web/components/Workspace.tsx

@@ -26,7 +26,7 @@ export default function Workspace() {
     // TODO: Use container query subscription instead of minitoring everything
   }, [mainContentRef.current, windowSize, sidebarWidth.value]);
 
-  const isSideBySide = mainContentWidth > 900;
+  const isSideBySide = mainContentWidth > 700;
 
   if (activeWorkspace == null) {
     return null;
@@ -65,7 +65,7 @@ export default function Workspace() {
             fullHeight={isSideBySide}
             className={classnames(isSideBySide ? 'pr-1.5' : 'pr-3 pb-0')}
           />
-          <ResponsePane className={classnames(isSideBySide && 'pl-1.5')} />
+          <ResponsePane className={classnames(isSideBySide ? 'pl-1.5' : 'mt-0')} />
         </div>
       </div>
     </div>

src-web/components/core/Button.tsx

@@ -17,7 +17,7 @@ const colorStyles = {
 export type ButtonProps = HTMLAttributes<HTMLElement> & {
   to?: string;
   color?: keyof typeof colorStyles;
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'xs';
   justify?: 'start' | 'center';
   type?: 'button' | 'submit';
   forDropdown?: boolean;
@@ -51,6 +51,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
         justify === 'center' && 'justify-center',
         size === 'md' && 'h-md px-3',
         size === 'sm' && 'h-sm px-2.5 text-sm',
+        size === 'xs' && 'h-xs px-2 text-sm',
       ),
     [color, size, justify, className],
   );

src-web/components/core/PairEditor.tsx

@@ -125,9 +125,9 @@ export const PairEditor = memo(function PairEditor({
       className={classnames(
         className,
         '@container',
-        'pb-6 grid',
+        'pb-2 grid',
         // NOTE: Add padding to top so overflow doesn't hide drop marker
-        'py-1',
+        'pt-1',
       )}
     >
       {pairs.map((p, i) => {
@@ -137,6 +137,7 @@ export const PairEditor = memo(function PairEditor({
             {hoveredIndex === i && <DropMarker />}
             <FormRow
               pairContainer={p}
+              className="py-1"
               isLast={isLast}
               nameAutocomplete={nameAutocomplete}
               valueAutocomplete={valueAutocomplete}
@@ -162,6 +163,7 @@ enum ItemTypes {
 }
 
 type FormRowProps = {
+  className?: string;
   pairContainer: PairContainer;
   onMove: (id: string, side: 'above' | 'below') => void;
   onEnd: (id: string) => void;
@@ -180,6 +182,7 @@ type FormRowProps = {
 >;
 
 const FormRow = memo(function FormRow({
+  className,
   pairContainer,
   onChange,
   onDelete,
@@ -247,7 +250,8 @@ const FormRow = memo(function FormRow({
     <div
       ref={ref}
       className={classnames(
-        'pb-2 group grid grid-cols-[auto_auto_minmax(0,1fr)_auto]',
+        className,
+        'group grid grid-cols-[auto_auto_minmax(0,1fr)_auto]',
         'grid-rows-1 items-center',
         !pairContainer.pair.enabled && 'opacity-60',
       )}

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

@@ -64,7 +64,7 @@ export function Tabs<T>({
     >
       <div
         aria-label={label}
-        className={classnames(tabListClassName, 'h-auto flex items-center pb-1')}
+        className={classnames(tabListClassName, 'h-auto flex items-center overflow-auto pb-0.5')}
       >
         <HStack space={1}>
           {tabs.map((t) => {

src-web/lib/theme/window.ts

@@ -32,7 +32,7 @@ const lightTheme: AppTheme = {
         gray: '#7f8fb0',
         red: '#ec3f87',
         orange: '#ff8b00',
-        yellow: '#deda00',
+        yellow: '#e7cf24',
         green: '#00d365',
         blue: '#0090ff',
         pink: '#f670f6',

tailwind.config.cjs

@@ -1,4 +1,5 @@
 const height = {
+  "xs": "1.5rem",
   "sm": "2rem",
   "md": "2.5rem"
 };