fix: overflow scrollable ui for large jwt

This commit is contained in:
Huakun Shen 2025-01-26 18:27:56 -05:00
parent c54b3d42bd
commit 9c3c7719b6
No known key found for this signature in database
2 changed files with 17 additions and 9 deletions

View File

@ -68,7 +68,7 @@
<div class="kunkun-drag-region h-8" />
<Resizable.PaneGroup direction="horizontal" class="h-full w-full rounded-lg pb-2">
<Resizable.Pane defaultSize={50}>
<div class="flex h-full w-full flex-col gap-1.5 px-3">
<div class="flex h-full w-full flex-col gap-1.5 overflow-y-auto px-3">
<Label for="message" class="text-lg">JWT Token</Label>
<div class="grow">
<span class="box-border whitespace-pre-wrap text-wrap break-words text-red-400"
@ -87,13 +87,15 @@
</div>
</Resizable.Pane>
<Resizable.Handle />
<Resizable.Pane defaultSize={50} class="px-4">
<Label for="message"
>HEADER: <span class="text-muted-foreground">Algorithm & Token Type</span></Label
>
<pre class="text-red-400">{JSON.stringify(header, null, 2)}</pre>
<Label for="message">PAYLOAD: <span class="text-muted-foreground">DATA</span></Label>
<pre class=" text-purple-400">{JSON.stringify(payload, null, 2)}</pre>
<Resizable.Pane defaultSize={50}>
<div class="h-full w-full flex flex-col overflow-auto px-4">
<Label for="message"
>HEADER: <span class="text-muted-foreground">Algorithm & Token Type</span></Label
>
<pre class="text-red-400">{JSON.stringify(header, null, 2)}</pre>
<Label for="message">PAYLOAD: <span class="text-muted-foreground">DATA</span></Label>
<pre class=" text-purple-400">{JSON.stringify(payload, null, 2)}</pre>
</div>
</Resizable.Pane>
</Resizable.PaneGroup>
</div>

View File

@ -79,11 +79,17 @@
return date;
}
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') {
ui.goBack();
}
}
</script>
<ThemeWrapper>
<Command.Root class="h-screen w-full px-2">
<Command.Input placeholder="Type a command or search..." autofocus />
<Command.Input placeholder="Type a command or search..." autofocus on:keydown={onKeyDown} />
<Command.List class="h-full">
<Command.Empty>
No JWT found in Clipboard.