merge conflict

Author: ananyayaya129

platforms/metagram/src/lib/fragments/Header/Header.svelte

@@ -45,7 +45,7 @@
 
 	const classes = $derived({
 		common: cn(
-			'flex items-center justify-between my-4 pb-4 border-b-[1px] md:border-0 border-grey px-4'
+			'flex items-center justify-between my-4 pb-6 border-b-[1px] md:border-0 border-grey'
 		),
 		text: variantClasses[variant].text,
 		background: variantClasses[variant].background

platforms/metagram/src/routes/(protected)/+layout.svelte

@@ -9,23 +9,29 @@
 	let route = $derived(page.url.pathname);
 	let heading = $state('');
 
-	const routeToHeading: Record<string, string> = {
-		'/home': 'Feed',
-		'/discover': 'Search',
-		'/post': 'Post',
-		'/messages': 'Messages',
-		'/settings': 'Settings',
-		'/profile': 'Profile'
-	};
-
 	$effect(() => {
-		heading = routeToHeading[route] ?? heading;
+		if (route.includes('home')) {
+			heading = 'Feed';
+		} else if (route.includes('discover')) {
+			heading = 'Search';
+		} else if (route.includes('post')) {
+			heading = 'Post';
+		} else if (route.includes('messages')) {
+			heading = 'Messages';
+		} else if (route.includes('settings')) {
+			heading = 'Settings';
+		} else if (route.includes('profile')) {
+			heading = 'Profile';
+		} else {
+			heading = '';
+		}
 	});
 </script>
 
 <main class="block h-[100dvh] grid-cols-[20vw_auto_30vw] md:grid">
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
-	<section class="mx-4 md:mx-8 md:pt-10">
+
+	<section class="mx-4 md:mx-8 md:pt-8">
 		<div class="flex justify-between">
 			<Header variant="primary" {heading} />
 			{#if route === '/profile'}

platforms/metagram/src/routes/(protected)/home/+page.svelte

@@ -58,7 +58,7 @@
 	});
 </script>
 
-<ul bind:this={listElement} class="hide-scrollbar h-[600px] overflow-auto">
+<ul bind:this={listElement} class="hide-scrollbar overflow-auto">
 	{#each visiblePosts as post}
 		<li class="mb-6">
 			<Post

platforms/metagram/src/routes/(protected)/settings/+layout.svelte

@@ -2,6 +2,6 @@
 	let { children } = $props();
 </script>
 
-<div class="flex flex-col gap-5 px-5">
+<div class="flex flex-col gap-5">
 	{@render children()}
 </div>