From 2ec9a1c19daffc4e0ce9509ec07c57c68cbc1fad Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 15 Feb 2024 16:38:14 -0800
Subject: [PATCH] Tweak tab padding

---
 src-web/components/GrpcConnectionSetupPane.tsx | 5 ++---
 src-web/components/core/SplitLayout.tsx        | 5 ++---
 src-web/components/core/Tabs/Tabs.tsx          | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src-web/components/GrpcConnectionSetupPane.tsx b/src-web/components/GrpcConnectionSetupPane.tsx
index 9e610b38..82eeb19b 100644
--- a/src-web/components/GrpcConnectionSetupPane.tsx
+++ b/src-web/components/GrpcConnectionSetupPane.tsx
@@ -1,8 +1,7 @@
 import useResizeObserver from '@react-hook/resize-observer';
 import classNames from 'classnames';
 import type { CSSProperties, FormEvent } from 'react';
-import React, { useCallback, useMemo, useRef } from 'react';
-import { useDebouncedState } from '../hooks/useDebouncedState';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import type { ReflectResponseService } from '../hooks/useGrpc';
 import { useGrpcConnections } from '../hooks/useGrpcConnections';
 import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
@@ -58,7 +57,7 @@ export function GrpcConnectionSetupPane({
   const activeConnection = connections[0] ?? null;
   const isStreaming = activeConnection?.elapsed === 0;
 
-  const [paneSize, setPaneSize] = useDebouncedState(99999, 100);
+  const [paneSize, setPaneSize] = useState(99999);
   const urlContainerEl = useRef<HTMLDivElement>(null);
   useResizeObserver<HTMLDivElement>(urlContainerEl.current, (entry) => {
     setPaneSize(entry.contentRect.width);
diff --git a/src-web/components/core/SplitLayout.tsx b/src-web/components/core/SplitLayout.tsx
index eb125910..7e766527 100644
--- a/src-web/components/core/SplitLayout.tsx
+++ b/src-web/components/core/SplitLayout.tsx
@@ -5,7 +5,6 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useLocalStorage } from 'react-use';
 import { useActiveRequestId } from '../../hooks/useActiveRequestId';
 import { useActiveWorkspaceId } from '../../hooks/useActiveWorkspaceId';
-import { useDebouncedState } from '../../hooks/useDebouncedState';
 import { clamp } from '../../lib/clamp';
 import { ResizeHandle } from '../ResizeHandle';
 import { HotKeyList } from './HotKeyList';
@@ -31,7 +30,7 @@ const areaL = { gridArea: 'left' };
 const areaR = { gridArea: 'right' };
 const areaD = { gridArea: 'drag' };
 
-const STACK_VERTICAL_WIDTH = 700;
+const STACK_VERTICAL_WIDTH = 500;
 
 export function SplitLayout({
   style,
@@ -45,7 +44,7 @@ export function SplitLayout({
   minWidthPx = 10,
 }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [vertical, setVertical] = useDebouncedState<boolean>(false, 100);
+  const [vertical, setVertical] = useState<boolean>(false);
   const [widthRaw, setWidth] = useLocalStorage<number>(`${name}_width::${useActiveWorkspaceId()}`);
   const [heightRaw, setHeight] = useLocalStorage<number>(
     `${name}_height::${useActiveWorkspaceId()}`,
diff --git a/src-web/components/core/Tabs/Tabs.tsx b/src-web/components/core/Tabs/Tabs.tsx
index 601298bc..2125bd2d 100644
--- a/src-web/components/core/Tabs/Tabs.tsx
+++ b/src-web/components/core/Tabs/Tabs.tsx
@@ -75,7 +75,7 @@ export function Tabs({
           tabListClassName,
           'flex items-center overflow-x-auto overflow-y-visible hide-scrollbars mt-1 mb-2',
           // Give space for button focus states within overflow boundary.
-          '-mx-5 pl-3 py-1',
+          '-ml-5 pl-3 pr-1 py-1',
         )}
       >
         <HStack space={2} className="flex-shrink-0">