Merge pull request #87 from Discusser/feature/scrollable-socials-and-…

…hobbies Make hobbies and socials scrollable
s1lvax · Oct 24, 2024 · 3fea862 · 3fea862
2 parents df3832b + 71ff865
commit 3fea862
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 12 deletions.
diff --git a/src/lib/components/PublicProfile/GithubStats.svelte b/src/lib/components/PublicProfile/GithubStats.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <!-- GitHub Stats Cards -->
-<div class="flex flex-col space-y-4">
+<div class="flex h-full flex-col justify-between space-y-4">
 	{#if githubData}
 		<StatsCard icon={Folder} title="Projects on Github" data={githubData.repoCount.toString()} />
 		<StatsCard

diff --git a/src/lib/components/PublicProfile/Hobbies.svelte b/src/lib/components/PublicProfile/Hobbies.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import * as Table from '$lib/components/ui/table';
-	import * as Card from '$lib/components/ui/card';
 	import type { PublicProfile } from '$lib/types/PublicProfile';
 
 	export let userData: PublicProfile;
@@ -12,7 +11,7 @@
 			<Table.Head>Hobbies</Table.Head>
 		</Table.Row>
 	</Table.Header>
-	<Table.Body>
+	<Table.Body class="block max-h-28 overflow-y-scroll [&>*]:border-b-0">
 		{#if userData.hobbies.length > 0}
 			{#each userData.hobbies as hobby}
 				<Table.Row class="flex flex-row space-x-4 hover:cursor-pointer">

diff --git a/src/lib/components/PublicProfile/ProfileHero.svelte b/src/lib/components/PublicProfile/ProfileHero.svelte
@@ -10,10 +10,10 @@
 
 <!-- User Avatar and Basic Info -->
 <div class="grid items-center gap-4 sm:grid-cols-1 md:grid-cols-[70%_30%]">
-	<div class="user-info">
+	<div class="user-info h-full">
 		<UserInfo {githubData} {userData} />
 	</div>
-	<div class="stats">
+	<div class="stats h-full">
 		<GithubStats {githubData} />
 	</div>
 </div>
diff --git a/src/lib/components/PublicProfile/Socials.svelte b/src/lib/components/PublicProfile/Socials.svelte
@@ -14,7 +14,7 @@
 			<Table.Head>Socials</Table.Head>
 		</Table.Row>
 	</Table.Header>
-	<Table.Body class="[&>*]:border-b-0">
+	<Table.Body class="block max-h-28 overflow-y-scroll [&>*]:border-b-0">
 		{#if githubData}
 			<!-- GitHub Profile -->
 			<Table.Row>
@@ -60,7 +60,7 @@
 			<!-- Socials will be here when we implement it -->
 		{:else}
 			{#each { length: 2 } as _}
-				<Table.Row>
+				<Table.Row class="block">
 					<Table.Cell class="flex space-x-8">
 						<Skeleton class="h-6 w-6 rounded-full" />
 						<Skeleton class="h-6 flex-grow" />

diff --git a/src/lib/components/PublicProfile/UserInfo.svelte b/src/lib/components/PublicProfile/UserInfo.svelte
@@ -15,16 +15,16 @@
 	export let userData: PublicProfile;
 </script>
 
-<Card.Root>
+<Card.Root class="flex h-full flex-col">
 	<!-- Card Header -->
 	<Card.Header>
 		<Card.Title>User Information</Card.Title>
 		<Card.Description>Discover the developer's personal information</Card.Description>
 	</Card.Header>
 
 	<!-- Card Content -->
-	<Card.Content>
-		<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+	<Card.Content class="flex-grow">
+		<div class="grid h-full grid-cols-1 gap-6 md:grid-cols-2">
 			<div class="introduction flex flex-col space-y-4">
 				<div class="flex flex-col items-center justify-center gap-2">
 					<Avatar.Root class="h-40 w-40 rounded-full">
@@ -71,9 +71,9 @@
 					</div>
 				</div>
 			</div>
-			<div class="information flex flex-col space-y-4">
+			<div class="information flex flex-col justify-between">
 				<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
-					<div class="socials">
+					<div class="socials max-h-full">
 						<Socials {githubData} />
 					</div>
 					<div class="hobbies">