begin layout

src/lib/components/activity.svelte

@@ -3,14 +3,17 @@
 	export let activity: MeWoachFeedActivity.Record[] = [];
 </script>
 
-<ul>
+<div class="col-span-2 rounded-sm bg-gray-400 p-2">
-	{#each activity as activityItem}
+	<h1>Activity:</h1>
-		<li class="mx-auto mb-2 w-1/3 bg-gray-600 p-4">
+	<ul>
-			<div>
+		{#each activity as activityItem}
-				<p>{activityItem.performedAt}</p>
+			<li class="mx-auto mb-2 rounded-sm bg-gray-500 p-4">
-				<p>{activityItem.progress}</p>
+				<div>
-				<p>{activityItem.session.uri}</p>
+					<p>{activityItem.performedAt}</p>
-			</div>
+					<p>{activityItem.progress}</p>
-		</li>
+					<p>{activityItem.session.uri}</p>
-	{/each}
+				</div>
-</ul>
+			</li>
+		{/each}
+	</ul>
+</div>

src/lib/components/list.svelte

@@ -3,20 +3,23 @@
 	export let sessions: MeWoachFeedSession.Record[] = [];
 </script>
 
-<ul>
+<div class="h-auto rounded-sm bg-gray-400 p-2">
-	{#each sessions as session}
+	<h1>List:</h1>
-		<li class="mx-auto mb-2 w-1/3 bg-gray-400 p-4">
+	<ul>
-			<div>
+		{#each sessions as session}
-				<a href={'https://pdsls.dev/' + session.content.uri}>{session.label}</a>
+			<li class="mx-auto mb-2 rounded-sm bg-gray-500 p-4">
-				<p>{session.createdAt}</p>
+				<div>
-				{#if session.participants?.length}
+					<a href={'https://pdsls.dev/' + session.content.uri}>{session.label}</a>
-					{#each session.participants ?? [] as participant}
+					<p>{session.createdAt}</p>
-						<a href={'/user/' + participant.uri.split('at://')[1]}
+					{#if session.participants?.length}
-							>{participant.uri.split('at://')[1]}</a
+						{#each session.participants ?? [] as participant}
-						>
+							<a href={'/user/' + participant.uri.split('at://')[1]}
-					{/each}
+								>{participant.uri.split('at://')[1]}</a
-				{/if}
+							>
-			</div>
+						{/each}
-		</li>
+					{/if}
-	{/each}
+				</div>
-</ul>
+			</li>
+		{/each}
+	</ul>
+</div>

src/routes/user/[handle]/+page.svelte

@@ -8,5 +8,7 @@
 
 <h1>{data.handle}</h1>
 
-<List sessions={data.sessions} />
+<div class="mx-auto grid w-3/4 grid-cols-3 gap-4">
-<Activity activity={data.activity} />
+	<Activity activity={data.activity} />
+	<List sessions={data.sessions} />
+</div>

src/routes/user/[handle]/+page.ts

@@ -18,8 +18,6 @@ export const load: PageLoad = async ({ params }) => {
 		(record: ComAtprotoRepoListRecords.Record) => record.value as MeWoachFeedActivity.Record
 	);
 
-	console.log(activity);
-
 	return {
 		handle: params.handle,
 		sessions: sessions,