From 1d5014b7608de98aa896ad4b25f5635264113338 Mon Sep 17 00:00:00 2001
From: Bob <dv4xd@proton.me>
Date: Sun, 29 Sep 2024 14:30:51 +0800
Subject: [PATCH] resolve a few minor problems

resolve #28, resolve #29, resolve #31
---
 src/components/ProblemView.svelte | 62 ++++++++++++++++---------------
 src/layouts/MailLayout.svelte     |  2 +-
 src/layouts/MailList.svelte       | 12 +++---
 3 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/components/ProblemView.svelte b/src/components/ProblemView.svelte
index 44f70a7..35f2b90 100644
--- a/src/components/ProblemView.svelte
+++ b/src/components/ProblemView.svelte
@@ -25,55 +25,57 @@
 			</p>
 			<Card.Root class="m-2 w-full rounded-none p-2"
 				><Card.Content class="p-0">
-					{#if !preview}
-						{#key problem.creator}
+					<div class="w-fit">
+						{#if !preview}
+							{#key problem.creator}
+								<HoverCard.Root>
+									<HoverCard.Trigger>
+										<div class="flex flex-nowrap items-center gap-2">
+											<Avatar
+												ndk={$ndk}
+												pubkey={problem.creator}
+												class="h-8 w-8 flex-none rounded-full object-cover"
+											/>
+											<Name
+												ndk={$ndk}
+												pubkey={problem.creator}
+												class="hidden max-w-32 truncate p-1 font-mono text-black dark:text-white md:inline-block"
+											/>
+										</div>
+									</HoverCard.Trigger>
+									<HoverCard.Content>
+										<ProfileCard pubkey={problem.creator} />
+									</HoverCard.Content>
+								</HoverCard.Root>
+							{/key}
+						{:else if $pubkey}
 							<HoverCard.Root>
 								<HoverCard.Trigger>
 									<div class="flex flex-nowrap items-center gap-2">
 										<Avatar
 											ndk={$ndk}
-											pubkey={problem.creator}
+											pubkey={$pubkey}
 											class="h-8 w-8 flex-none rounded-full object-cover"
 										/>
 										<Name
 											ndk={$ndk}
-											pubkey={problem.creator}
+											pubkey={$pubkey}
 											class="hidden max-w-32 truncate p-1 font-mono text-black dark:text-white md:inline-block"
 										/>
 									</div>
 								</HoverCard.Trigger>
 								<HoverCard.Content>
-									<ProfileCard pubkey={problem.creator} />
+									<ProfileCard pubkey={$pubkey} />
 								</HoverCard.Content>
 							</HoverCard.Root>
-						{/key}
-					{:else if $pubkey}
-						<HoverCard.Root>
-							<HoverCard.Trigger>
-								<div class="flex flex-nowrap items-center gap-2">
-									<Avatar
-										ndk={$ndk}
-										pubkey={$pubkey}
-										class="h-8 w-8 flex-none rounded-full object-cover"
-									/>
-									<Name
-										ndk={$ndk}
-										pubkey={$pubkey}
-										class="hidden max-w-32 truncate p-1 font-mono text-black dark:text-white md:inline-block"
-									/>
-								</div>
-							</HoverCard.Trigger>
-							<HoverCard.Content>
-								<ProfileCard pubkey={$pubkey} />
-							</HoverCard.Content>
-						</HoverCard.Root>
-					{:else}
-						<div>User information needs to be displayed after logging in.</div>
-					{/if}
+						{:else}
+							<div>User information needs to be displayed after logging in.</div>
+						{/if}
+					</div>
 				</Card.Content></Card.Root
 			>
 			{#key problem.event}
-				<div class="markdown">
+				<div class="markdown w-full">
 					<CartaViewer {carta} bind:value={problem.page} />
 				</div>
 			{/key}
diff --git a/src/layouts/MailLayout.svelte b/src/layouts/MailLayout.svelte
index a43cd80..71f539f 100644
--- a/src/layouts/MailLayout.svelte
+++ b/src/layouts/MailLayout.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <Resizable.PaneGroup direction="horizontal" class="h-full items-stretch overflow-hidden">
-	<Resizable.Pane defaultSize={20} minSize={10} maxSize={50}>
+	<Resizable.Pane defaultSize={20} minSize={20} maxSize={50}>
 		<slot name="list" />
 	</Resizable.Pane>
 
diff --git a/src/layouts/MailList.svelte b/src/layouts/MailList.svelte
index bde72dc..d2fb75b 100644
--- a/src/layouts/MailList.svelte
+++ b/src/layouts/MailList.svelte
@@ -10,23 +10,23 @@
 	import Filters from '../components/Filters.svelte';
 </script>
 
-<div class="flex flex-col gap-2">
-	<div class="gap-2 px-2"><Filters /></div>
-	<form class="px-2">
+<div class="flex flex-col gap-2 p-2">
+	<div class="gap-2"><Filters /></div>
+	<form>
 		<div class="relative">
 			<Search class="absolute left-2 top-[50%] h-4 w-4 translate-y-[-50%] text-muted-foreground" />
 			<Input placeholder="Search" class="pl-8" />
 		</div>
 	</form>
-	<ScrollArea class="h-[calc(100vh-142px)]">
-		<div class="flex flex-col items-center gap-2 p-2">
+	<ScrollArea class="h-[calc(100vh-150px)]">
+		<div class="flex flex-col items-center gap-2">
 			{#each items as item}
 				<button
 					on:click={() => {
 						console.log(item.event);
 						selected = item;
 					}}
-					class="flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent"
+					class="flex w-full flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent"
 				>
 					<div class="flex w-full flex-col gap-1">
 						<div class="flex items-center">