Tweak font sizes

This commit is contained in:
Gregory Schier
2025-12-22 14:40:18 -08:00
parent 5f8902e57b
commit 9c5479b206
3 changed files with 16 additions and 16 deletions

View File

@@ -20,15 +20,15 @@ interface Props {
response: HttpResponse;
}
export function ResponseEvents({ response }: Props) {
export function ResponseTimeline({ response }: Props) {
return (
<Fragment key={response.id}>
<ActualResponseEvents response={response} />
<Inner response={response} />
</Fragment>
);
}
function ActualResponseEvents({ response }: Props) {
function Inner({ response }: Props) {
const [activeEventIndex, setActiveEventIndex] = useState<number | null>(null);
const { data: events, error, isLoading } = useHttpResponseEvents(response);
@@ -57,8 +57,8 @@ function ActualResponseEvents({ response }: Props) {
<SplitLayout
layout="vertical"
name="http_response_events"
defaultRatio={0.5}
minHeightPx={20}
defaultRatio={0.25}
minHeightPx={10}
firstSlot={() => (
<AutoScroller
data={events}
@@ -112,14 +112,14 @@ function EventRow({
onClick={onClick}
className={classNames(
'w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left',
'px-1.5 h-xs font-mono cursor-default group focus:outline-none focus:text-text rounded',
'px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-none focus:text-text rounded',
isActive && '!bg-surface-active !text-text',
'text-text-subtle hover:text',
)}
>
<Icon color={color} icon={icon} size="sm" />
<div className="w-full truncate text-xs">{summary}</div>
<div className="text-xs opacity-50">{format(`${event.createdAt}Z`, 'HH:mm:ss.SSS')}</div>
<div className="w-full truncate">{summary}</div>
<div className="opacity-50">{format(`${event.createdAt}Z`, 'HH:mm:ss.SSS')}</div>
</button>
</div>
);
@@ -219,7 +219,7 @@ function EventDetails({ event }: { event: HttpResponseEvent }) {
return (
<div className="flex flex-col gap-2">
<DetailHeader title={`Data ${direction}`} timestamp={timestamp} />
<div className="font-mono text-sm">{formatBytes(e.bytes)}</div>
<div className="font-mono text-editor">{formatBytes(e.bytes)}</div>
</div>
);
}
@@ -229,7 +229,7 @@ function EventDetails({ event }: { event: HttpResponseEvent }) {
return (
<div className="flex flex-col gap-1">
<DetailHeader title={label} timestamp={timestamp} />
<div className="font-mono text-sm">{summary}</div>
<div className="font-mono text-editor">{summary}</div>
</div>
);
}