Merge pull request #24 from bob2402/fix-scroll

problem: can't scroll problem list and problem text
nostrocket · Sep 29, 2024 · d997226 · d997226
2 parents aa78f6c + ed861c8
commit d997226
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 71 deletions.
diff --git a/src/components/ProblemView.svelte b/src/components/ProblemView.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ScrollArea from '@/components/ui/scroll-area/scroll-area.svelte';
 	import * as Card from '@/components/ui/card';
 	import * as HoverCard from '@/components/ui/hover-card';
 	import type { Problem } from '@/event_helpers/problems';
@@ -13,42 +14,44 @@
 </script>
 
 {#if problem}
-	<div class="flex flex-col items-center">
-		<h1 class="text-2xl font-semibold">{problem.tldr}</h1>
-		<p class="text-sm text-muted-foreground">
-			{problem.para}
-		</p>
-		<Card.Root class="m-2 w-full rounded-none p-2"
-			><Card.Content class="p-0">
-				{#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-white dark:text-black md:inline-block"
-								/>
-							</div>
-						</HoverCard.Trigger>
-						<HoverCard.Content>
-							<ProfileCard pubkey={$pubkey} />
-						</HoverCard.Content>
-					</HoverCard.Root>
-				{/key}
-			</Card.Content></Card.Root
-		>
-		{#key problem.event.id}
-			<div class="markdown">
-				<Carta.CartaViewer carta={new Carta.Carta()} value={problem.page} />
-			</div>
-		{/key}
-	</div>
+	<ScrollArea class="h-[calc(100vh-64px)]">
+		<div class="flex flex-col items-center p-4">
+			<h1 class="text-2xl font-semibold">{problem.tldr}</h1>
+			<p class="text-sm text-muted-foreground">
+				{problem.para}
+			</p>
+			<Card.Root class="m-2 w-full rounded-none p-2"
+				><Card.Content class="p-0">
+					{#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-white dark:text-black md:inline-block"
+									/>
+								</div>
+							</HoverCard.Trigger>
+							<HoverCard.Content>
+								<ProfileCard pubkey={$pubkey} />
+							</HoverCard.Content>
+						</HoverCard.Root>
+					{/key}
+				</Card.Content></Card.Root
+			>
+			{#key problem.event.id}
+				<div class="markdown">
+					<Carta.CartaViewer carta={new Carta.Carta()} value={problem.page} />
+				</div>
+			{/key}
+		</div>
+	</ScrollArea>
 {:else}
 	<Card.Root class="m-4 mt-32 p-4"
 		><Card.CardTitle class="flex items-center"

diff --git a/src/layouts/MailLayout.svelte b/src/layouts/MailLayout.svelte
@@ -1,16 +1,12 @@
 <script lang="ts">
 	import * as Resizable from '$lib/components/ui/resizable';
-
-	import { ScrollArea } from '@/components/ui/scroll-area';
 </script>
 
 <Resizable.PaneGroup direction="horizontal" class="h-full items-stretch overflow-hidden">
 	<Resizable.Pane defaultSize={20} minSize={10} maxSize={50}>
-		<ScrollArea class="h-full pl-2 pr-2"><slot name="list" /></ScrollArea></Resizable.Pane
-	>
+		<slot name="list" />
+	</Resizable.Pane>
 
 	<Resizable.Handle withHandle />
-	<Resizable.Pane maxSize={85}
-		><ScrollArea class="h-full pl-2 pr-2"><slot name="problem" /></ScrollArea>
-	</Resizable.Pane>
+	<Resizable.Pane maxSize={85}><slot name="problem" /></Resizable.Pane>
 </Resizable.PaneGroup>
diff --git a/src/layouts/MailList.svelte b/src/layouts/MailList.svelte
@@ -11,39 +11,41 @@
 </script>
 
 <div class="flex flex-col gap-2">
-	<div class="gap-2"><Filters /></div>
-	<form>
+	<div class="gap-2 px-2"><Filters /></div>
+	<form class="px-2">
 		<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>
-	{#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"
-		>
-			<div class="flex w-full flex-col gap-1">
-				<div class="flex items-center">
-					<div class="flex items-center gap-2">
-						<div class="font-semibold">{item.tldr}</div>
-						{#if !bloom}
-							<span class="flex h-2 w-2 rounded-full bg-blue-600" />
-						{/if}
+	<ScrollArea class="h-[calc(100vh-142px)]">
+		<div class="flex flex-col items-center gap-2 p-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"
+				>
+					<div class="flex w-full flex-col gap-1">
+						<div class="flex items-center">
+							<div class="flex items-center gap-2">
+								<div class="font-semibold">{item.tldr}</div>
+								{#if !bloom}
+									<span class="flex h-2 w-2 rounded-full bg-blue-600" />
+								{/if}
+							</div>
+							<div class="ml-auto text-xs text-foreground">
+								{formatTimeAgo(new Date(item.event.created_at * 1000))}
+							</div>
+						</div>
+						<div class="text-xs font-medium">{item.para}</div>
 					</div>
-					<div class="ml-auto text-xs text-foreground">
-						{formatTimeAgo(new Date(item.event.created_at * 1000))}
+					<div class="line-clamp-2 text-xs text-muted-foreground">
+						{'todo: add full page description of problem'.substring(0, 300)}
 					</div>
-				</div>
-				<div class="text-xs font-medium">{item.para}</div>
-			</div>
-			<div class="line-clamp-2 text-xs text-muted-foreground">
-				{'todo: add full page description of problem'.substring(0, 300)}
-			</div>
-			<!-- {#if item.labels.length}
+					<!-- {#if item.labels.length}
 					<div class="flex items-center gap-2">
 						{#each item.labels as label}
 							<Badge variant={get_badge_variant_from_label(label)}>
@@ -52,6 +54,8 @@
 						{/each}
 					</div>
 				{/if} -->
-		</button>
-	{/each}
+				</button>
+			{/each}
+		</div>
+	</ScrollArea>
 </div>