Better KeyValueRow sizing

src-web/components/RequestPane.tsx

@@ -2,12 +2,12 @@ import type { HttpRequest, HttpRequestHeader, HttpUrlParameter } from '@yaakapp-
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { createGlobalState } from 'react-use';
+import { useLocalStorage } from 'react-use';
 import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
 import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
 import { useImportCurl } from '../hooks/useImportCurl';
-import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
 import { useImportQuerystring } from '../hooks/useImportQuerystring';
+import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useRequestEditor, useRequestEditorEvent } from '../hooks/useRequestEditor';
 import { useRequests } from '../hooks/useRequests';
@@ -55,8 +55,6 @@ interface Props {
   activeRequest: HttpRequest;
 }
 
-const useActiveTab = createGlobalState<Record<string, string>>({});
-
 const TAB_BODY = 'body';
 const TAB_PARAMS = 'params';
 const TAB_HEADERS = 'headers';
@@ -73,7 +71,10 @@ export const RequestPane = memo(function RequestPane({
   const requests = useRequests();
   const activeRequestId = activeRequest.id;
   const updateRequest = useUpdateAnyHttpRequest();
-  const [activeTabs, setActiveTabs] = useActiveTab();
+  const [activeTabs, setActiveTabs] = useLocalStorage<Record<string, string>>(
+    'requestPaneActiveTabs',
+    {},
+  );
   const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
   const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
   const [{ urlKey }] = useRequestEditor();
@@ -299,7 +300,7 @@ export const RequestPane = memo(function RequestPane({
   const importCurl = useImportCurl();
   const importQuerystring = useImportQuerystring(activeRequestId);
 
-  const activeTab = activeTabs[activeRequestId] ?? DEFAULT_TAB;
+  const activeTab = activeTabs?.[activeRequestId] ?? DEFAULT_TAB;
   const setActiveTab = useCallback(
     (tab: string) => {
       setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));

src-web/components/ResponsePane.tsx

@@ -2,7 +2,7 @@ import type { HttpRequest } from '@yaakapp-internal/models';
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo } from 'react';
-import { createGlobalState } from 'react-use';
+import { useLocalStorage } from 'react-use';
 import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useResponseViewMode } from '../hooks/useResponseViewMode';
@@ -34,8 +34,6 @@ interface Props {
   activeRequest: HttpRequest;
 }
 
-const useActiveTab = createGlobalState<Record<string, string>>({});
-
 const TAB_BODY = 'body';
 const TAB_HEADERS = 'headers';
 const TAB_INFO = 'info';
@@ -44,9 +42,12 @@ const DEFAULT_TAB = TAB_BODY;
 export const ResponsePane = memo(function ResponsePane({ style, className, activeRequest }: Props) {
   const { activeResponse, setPinnedResponseId, responses } = usePinnedHttpResponse(activeRequest);
   const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
-  const [activeTabs, setActiveTabs] = useActiveTab();
+  const [activeTabs, setActiveTabs] = useLocalStorage<Record<string, string>>(
+    'responsePaneActiveTabs',
+    {},
+  );
   const contentType = useContentTypeFromHeaders(activeResponse?.headers ?? null);
-  const activeTab = activeTabs[activeRequest.id] ?? DEFAULT_TAB;
+  const activeTab = activeTabs?.[activeRequest.id] ?? DEFAULT_TAB;
   const setActiveTab = useCallback(
     (tab: string) => {
       setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));

src-web/components/core/KeyValueRow.tsx

@@ -11,7 +11,7 @@ export function KeyValueRows({ children }: Props) {
   children = Array.isArray(children) ? children : [children];
   return (
     <table className="text-xs font-mono min-w-0 w-full mb-auto">
-      <tbody className="divide-highlightSecondary">
+      <tbody className="divide-y divide-surface-highlight">
         {children.map((child, i) => (
           <tr key={i}>{child}</tr>
         ))}
@@ -37,16 +37,18 @@ export function KeyValueRow({
     <>
       <td
         className={classNames(
-          'py-0.5 pr-2 select-text cursor-text whitespace-nowrap',
+          'select-none py-0.5 pr-2 h-full align-top max-w-[10rem]',
           labelClassName,
           labelColor === 'primary' && 'text-primary',
           labelColor === 'secondary' && 'text-text-subtle',
           labelColor === 'info' && 'text-info',
         )}
       >
-        {label}
+        <span className="select-text cursor-text">{label}</span>
+      </td>
+      <td className="select-none py-0.5 break-all align-top max-w-[15rem]">
+        <div className="select-text cursor-text max-h-[5rem] overflow-y-auto">{value}</div>
       </td>
-      <td className="py-0.5 cursor-text select-text break-all min-w-0">{value}</td>
     </>
   );
 }