From 31e4efadc3369d576cc1dc29de77414bf08a4ff6 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Sun, 17 Mar 2024 10:55:11 +0100
Subject: [PATCH] feat: Scrolling pages

---
 src/fonts.ts          |  3 +++
 src/index.tsx         |  2 +-
 src/ui/App.tsx        | 12 +++++++-----
 src/ui/pages/Home.tsx |  2 +-
 4 files changed, 12 insertions(+), 7 deletions(-)
 create mode 100644 src/fonts.ts

diff --git a/src/fonts.ts b/src/fonts.ts
new file mode 100644
index 00000000..c7488af2
--- /dev/null
+++ b/src/fonts.ts
@@ -0,0 +1,3 @@
+import '@fontsource/poppins/400.css';
+import '@fontsource/poppins/500.css';
+import '@fontsource/poppins/600.css';
diff --git a/src/index.tsx b/src/index.tsx
index 08cea3b3..78eb568d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,7 @@
 import { render } from 'solid-js/web';
 
 import './globals.css';
-import '@fontsource/poppins';
+import './fonts';
 import { Route, Router } from '@solidjs/router';
 import App from './ui/App';
 import HomePage from './ui/pages/Home';
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index db2b1e1f..e0845a8e 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -12,13 +12,15 @@ function App(props: ParentProps) {
 	}
 
 	return (
-		<main class="flex flex-col bg-primary min-h-screen text-white">
+		<main class="flex flex-col bg-primary overflow-hidden min-h-screen max-h-screen text-white">
 			<WindowFrame />
-			<div class="flex flex-col flex-1 overflow-x-hidden px-8">
+			<div class="flex flex-col flex-1 px-8 max-h-screen">
 				<Navbar />
-				<AnimatedRoutes>
-					{props.children}
-				</AnimatedRoutes>
+				<div class="max-h-full overflow-y-auto">
+					<AnimatedRoutes>
+						{props.children}
+					</AnimatedRoutes>
+				</div>
 			</div>
 		</main>
 	);
diff --git a/src/ui/pages/Home.tsx b/src/ui/pages/Home.tsx
index 2de82611..a15f4947 100644
--- a/src/ui/pages/Home.tsx
+++ b/src/ui/pages/Home.tsx
@@ -70,7 +70,7 @@ function InstanceCard(props: InstanceCardProps) {
 	return (
 		<div class="h-[152px] group flex flex-col rounded-xl bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-.5 overflow-hidden">
 			<div class="flex-1 relative overflow-hidden">
-				<div class="absolute h-full w-full group-hover:scale-110 transition-transform">
+				<div class="absolute h-full w-full group-hover:!scale-110 transition-transform" style={{ '-webkit-transform': 'translateZ(0)' }}>
 					<img
 						class={`object-cover h-full w-full ${props.cover ? '' : ' filter grayscale'}`}
 						src={props.cover || defaultCover}