feat(web): improve page header + scrolling (#2453)

* fix: line to edge of screen

* refactor: user layout page

web/src/lib/components/layouts/user-page-layout.svelte

@@ -22,24 +22,25 @@
 </header>
 
 <main
-	class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] relative pt-[var(--navbar-height)] h-screen bg-immich-bg dark:bg-immich-dark-bg immich-scrollbar"
+	class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] relative pt-[var(--navbar-height)] h-screen overflow-hidden bg-immich-bg dark:bg-immich-dark-bg"
 >
 	<SideBar />
 	<slot name="content">
-		<section class="overflow-y-auto my-8 mx-4 bg-immich-bg dark:bg-immich-dark-bg">
 		{#if title}
-				<div class="flex justify-between place-items-center dark:text-immich-dark-fg px-4 h-10">
+			<section class="relative">
+				<div
+					class="absolute border-b dark:border-immich-dark-gray flex justify-between place-items-center dark:text-immich-dark-fg w-full p-4 h-16"
+				>
 					<p class="font-medium">{title}</p>
-
 					<slot name="buttons" />
 				</div>
 
-				<div class="my-4">
+				<div
-					<hr class="dark:border-immich-dark-gray" />
+					class="absolute overflow-y-auto top-16 h-[calc(100%-theme(spacing.16))] w-full immich-scrollbar p-4 pb-8"
-				</div>
+				>
-			{/if}
-
 					<slot />
+				</div>
 			</section>
+		{/if}
 	</slot>
 </main>

web/src/lib/components/shared-components/side-bar/side-bar-section.svelte

@@ -3,7 +3,7 @@
 
 <section
 	id="sidebar"
-	class="group flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-all duration-200 z-10 w-18 md:w-64 hover:sm:pr-6 md:pr-6 hover:sm:w-64 hover:sm:shadow-2xl hover:md:shadow-none hover:md:border-none hover:sm:border-r hover:sm:dark:border-r-immich-dark-gray"
+	class="group flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-all duration-200 z-10 w-18 md:w-64 hover:sm:pr-6 md:pr-6 hover:sm:w-64 hover:sm:shadow-2xl hover:md:shadow-none hover:md:border-none hover:sm:border-r hover:sm:dark:border-r-immich-dark-gray relative overflow-y-auto immich-scrollbar"
 >
 	<slot />
 </section>

web/src/routes/(user)/archive/+page.svelte

@@ -36,7 +36,7 @@
 	};
 </script>
 
-<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode}>
+<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode} title={data.meta.title}>
 	<!-- Empty Message -->
 	{#if $archivedAsset.length === 0}
 		<EmptyPlaceholder

web/src/routes/(user)/explore/+page.svelte

@@ -31,7 +31,6 @@
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-	<div class="mx-4">
 	{#if people.length > 0}
 		<div class="mb-6 mt-2">
 			<div class="flex justify-between">
@@ -111,9 +110,7 @@
 
 	<hr class="dark:border-immich-dark-gray mb-4" />
 
-		<div
+	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
-			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8"
-		>
 		<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
 			<p class="text-sm">YOUR ACTIVITY</p>
 			<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
@@ -157,5 +154,4 @@
 			</div>
 		</div>
 	</div>
-	</div>
 </UserPageLayout>

web/src/routes/(user)/favorites/+page.svelte

@@ -40,7 +40,7 @@
 	</AssetSelectControlBar>
 {/if}
 
-<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode}>
+<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode} title={data.meta.title}>
 	<section>
 		<!-- Empty Message -->
 		{#if favorites.length === 0}

web/src/routes/(user)/map/+page.svelte

@@ -45,7 +45,7 @@
 <UserPageLayout user={data.user} title={data.meta.title}>
 	<div slot="buttons" />
 
-	<div class="h-[90%] w-full relative z-0">
+	<div class="h-full w-full relative z-0">
 		{#await import('$lib/components/shared-components/leaflet') then { Map, TileLayer, AssetMarkerCluster }}
 			<Map latlng={initialMapCenter} zoom={7}>
 				<TileLayer

web/src/routes/(user)/sharing/+page.svelte

@@ -53,7 +53,7 @@
 		</LinkButton>
 	</div>
 
-	<div class="mx-4 flex flex-col">
+	<div class="flex flex-col">
 		{#if data.partners.length > 0}
 			<div class="mb-6 mt-2">
 				<div>