From d1f19bf1a8db3688c87411efaf16774057a9a0af Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 15 Aug 2022 21:05:48 -0400
Subject: [PATCH] fix: i am not the only contributor, jumping scrollbar fixed

---
 .../components/atoms/ContributorButton.svelte    | 16 ++++++++--------
 .../components/molecules/ContributorHost.svelte  | 11 +++++++----
 src/routes/__layout.svelte                       |  1 +
 src/routes/credits.svelte                        | 10 ++++++++--
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/atoms/ContributorButton.svelte b/src/lib/components/atoms/ContributorButton.svelte
index 91bd169..957ed7c 100644
--- a/src/lib/components/atoms/ContributorButton.svelte
+++ b/src/lib/components/atoms/ContributorButton.svelte
@@ -1,8 +1,8 @@
-<script>
-	export const username = "afnzmn"
-	export const href = `https://github.com/${username}`
-	export const src = `https://github.com/${username}.png`
-	export const alt = `${username}'s contributor profile picture`
+<script lang="ts">
+	export let username: String;
+	let href = `https://github.com/${username}`
+	let src = `https://github.com/${username}.png`
+	let alt = `${username}'s contributor profile picture`
 </script>
 
 <a {href}>
@@ -30,13 +30,13 @@
         max-width: 86px;
 		cursor: pointer;
 		background-color: var(--grey-four);
-		font-size: 1.5rem;
 		transition: transform 0.4s var(--bezier-one);
+		margin-bottom: 1rem;
 		user-select: none;
 	}
 
-	button:hover {
-		transform: translate(0%, -5%);
+	a:hover > button {
+		transform: translateY(-5%);
 	}
 
 	img {
diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte
index 264a4d4..ce4da9c 100644
--- a/src/lib/components/molecules/ContributorHost.svelte
+++ b/src/lib/components/molecules/ContributorHost.svelte
@@ -1,17 +1,20 @@
-<script>
+<script lang="ts">
     import ContributorButton from "../atoms/ContributorButton.svelte";
+    export let peoples: Array<String>;
 </script>
 
 <div class="social-host">
-    <ContributorButton></ContributorButton>
+    {#each peoples as person}
+        <ContributorButton username={person}></ContributorButton>
+    {/each}
 </div>
 
 <style>
     .social-host {
+        gap: 2rem;
         width: 100;
-        gap:2rem;
-		align-items: center;
         display: grid;
+		align-items: center;
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     }
 </style>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 0bc8514..bd13ae0 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -45,6 +45,7 @@
 		padding: 0;
 		font-size: 100%;
 		box-sizing: border-box;
+		overflow-y: scroll;
 	}
 
 	:global(body) {
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index cbc0ff4..47900b2 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -1,7 +1,13 @@
 <script>
     import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-    </script>
+    let peoples = [
+        "Ushie",
+        "afnzmn",
+        "baiorett",
+        "PickleNik",
+    ]
+</script>
 
 <div class="wrapper">
-    <ContributorHost></ContributorHost>
+    <ContributorHost {peoples}></ContributorHost>
 </div>
\ No newline at end of file