begin layout

src/lib/components/activity.svelte

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

src/lib/components/list.svelte

@@ -3,9 +3,11 @@
 	export let sessions: MeWoachFeedSession.Record[] = [];
 </script>
 
-<ul>
+<div class="h-auto rounded-sm bg-gray-400 p-2">
+	<h1>List:</h1>
+	<ul>
 		{#each sessions as session}
-		<li class="mx-auto mb-2 w-1/3 bg-gray-400 p-4">
+			<li class="mx-auto mb-2 rounded-sm bg-gray-500 p-4">
 				<div>
 					<a href={'https://pdsls.dev/' + session.content.uri}>{session.label}</a>
 					<p>{session.createdAt}</p>
@@ -19,4 +21,5 @@
 				</div>
 			</li>
 		{/each}
-</ul>
+	</ul>
+</div>

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

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