From 9c3c7719b6a4e8d4558e84a3fb264d61d22aea8f Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Sun, 26 Jan 2025 18:27:56 -0500
Subject: [PATCH] fix: overflow scrollable ui for large jwt

---
 src/routes/+page.svelte        | 18 ++++++++++--------
 src/routes/search/+page.svelte |  8 +++++++-
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c9474c8..0e437fb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -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>
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index 36ec563..3018a7a 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -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.