problem: layout still sucks

nostrocket · Oct 14, 2024 · bcfb1e0 · bcfb1e0
1 parent 86a307a
commit bcfb1e0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 38 deletions.
diff --git a/src/components/RecursiveProblemTile.svelte b/src/components/RecursiveProblemTile.svelte
@@ -21,49 +21,54 @@
 </script>
 
 {#if problem}
-	<Card
-		on:click={() => {
-			//if (!expanded && !$isSelected) {expanded = true}
-			$selected = problem;
-		}}
-		class="problems-start flex w-full cursor-zoom-in flex-col gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent hover:bg-opacity-100 {$isSelected
-			? 'bg-accent bg-opacity-90'
-			: ''}"
-	>
-		<div class="flex w-full flex-col gap-1">
-			<div class="problems-center flex">
-				<div class="problems-center flex gap-2">
-					<div class="font-semibold">{problem.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(problem.event.created_at * 1000))}
+	<div class="my-1">
+		<Card
+			on:click={() => {
+				//if (!expanded && !$isSelected) {expanded = true}
+				$selected = problem;
+			}}
+			class="problems-start flex w-full cursor-zoom-in flex-col gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent hover:bg-opacity-100 {$isSelected
+				? 'bg-accent bg-opacity-90'
+				: ''}"
+		>
+			<div class="flex w-full flex-col gap-1">
+				<div class="problems-center flex">
+					<div class="problems-center flex gap-2">
+						<div class="font-semibold">{problem.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(problem.event.created_at * 1000))}
+					</div>
 				</div>
+				<div class="text-x-s font-light">{problem.para}</div>
+			</div>
+			<div class="line-clamp-2 text-xs text-muted-foreground">
+				{problem.page.substring(0, 300)}
 			</div>
-			<div class="text-x-s font-light">{problem.para}</div>
-		</div>
-		<div class="line-clamp-2 text-xs text-muted-foreground">
-			{problem.page.substring(0, 300)}
-		</div>
-		<div class="flex gap-2">
-			<div
-				class="flex cursor-pointer flex-row"
-				on:click={() => {
-					expanded = !expanded;
-				}}
-			>
-				{#if !expanded}<ChevronRight />{:else}<ChevronDown />{/if}<span
-					class="mb-auto mt-auto text-nowrap font-extralight">{$children.length} sub-problems</span
+			<div class="flex gap-2">
+				<div
+					class="flex cursor-pointer flex-row"
+					on:click={() => {
+						expanded = !expanded;
+					}}
 				>
+					{#if !expanded}<ChevronRight />{:else}<ChevronDown />{/if}<span
+						class="mb-auto mt-auto text-nowrap font-extralight"
+						>{$children.length} sub-problems</span
+					>
+				</div>
 			</div>
-		</div>
-	</Card>
+		</Card>
+	</div>
 	{#if expanded}
 		{#each $children as child}
-			<div class="pl-2">
-				<svelte:self problem={child}></svelte:self>
+			<div class="flex w-full flex-col">
+				<div class="pl-3">
+					<svelte:self problem={child}></svelte:self>
+				</div>
 			</div>
 		{/each}
 	{/if}

diff --git a/src/layouts/MailList.svelte b/src/layouts/MailList.svelte
@@ -23,7 +23,7 @@
 		</div>
 	</form>
 	<ScrollArea class="h-[calc(100vh-154px)] px-4">
-		<div class="flex flex-col items-center gap-2">
+		<div class="flex flex-col">
 			{#each $filtered as problem}
 				<ProblemTile {problem}></ProblemTile>
 			{/each}