From 4b3cf3b3e2b40d3cb3dd2bf8b3bf3afe3e77249a Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 20 Dec 2022 13:20:41 -0800
Subject: max w

---
 src/routes/(app)/feed/+page.svelte | 44 +++++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/routes/(app)/feed/+page.svelte b/src/routes/(app)/feed/+page.svelte
index d5846533..93fe47e7 100644
--- a/src/routes/(app)/feed/+page.svelte
+++ b/src/routes/(app)/feed/+page.svelte
@@ -16,33 +16,37 @@
 	$: sorted = Object.values($events)
 		.filter((ev) => ev?.pubkey)
 		.sort((a, b) => b.seen - a.seen);
+
+	let w;
 </script>
 
-<div class="mt-24 mb-20">
+<svelte:window bind:innerWidth={w} />
+
+<div class="mb-20">
 	<div class="container w-full mx-auto text-lg px-4 md:max-w-2xl space-y-5">
-		<div class="vs">
-			{#if browser}
-				<VirtualScroll data={sorted} key="id" let:data pageMode={true}>
-					<div class="flex border-b py-4" :key={data.id} use:fade>
-						<div class="mb-auto mr-2">
-							<div class="md:hidden">
-								<Avatar size={12} src={`/api/public/runners/${runner()}`} />
-							</div>
-							<div class="hidden md:block">
-								<Avatar size={20} src={`/api/public/runners/${runner()}`} />
-							</div>
+		{#if browser}
+			<VirtualScroll data={sorted} key="id" let:data pageMode={true} estimateSize={200}>
+				<div class="flex border-b py-4 text-sm text-secondary" :key={data.id} use:fade>
+					<div class="mb-auto mr-2">
+						<div class="md:hidden">
+							<Avatar size={12} src={`/api/public/runners/${runner()}`} />
+						</div>
+						<div class="hidden md:block">
+							<Avatar size={20} src={`/api/public/runners/${runner()}`} />
 						</div>
+					</div>
 
-						<div class="text-secondary break-words w-full">
-							<div class="w-full flex text-sm pb-1">
-								<div class="text-black">{data.pubkey.substr(0, 6)}</div>
-								<div class="ml-auto text-sm">{format(new Date(data.seen * 1000), 'h:mm aaa')}</div>
-							</div>
+					<div class="grow" style={`max-width: ${w - 100}px`}>
+						<div class="w-full flex pb-1 text-black">
+							<div>{data.pubkey.substr(0, 6)}</div>
+							<div class="ml-auto">{format(new Date(data.seen * 1000), 'h:mm aaa')}</div>
+						</div>
+						<div class="break-words">
 							{data.content}
 						</div>
 					</div>
-				</VirtualScroll>
-			{/if}
-		</div>
+				</div>
+			</VirtualScroll>
+		{/if}
 	</div>
 </div>
-- 
cgit v1.2.3