feat: Scrolling pages

src/fonts.ts

@@ -0,0 +1,3 @@
+import '@fontsource/poppins/400.css';
+import '@fontsource/poppins/500.css';
+import '@fontsource/poppins/600.css';

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';

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>
 	);

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}