feat: Overflow fixes - I. Hate. Webdev.

src/ui/App.tsx

@@ -12,14 +12,20 @@ function App(props: ParentProps) {
 	}
 
 	return (
-		<main class="flex flex-col bg-primary overflow-hidden min-h-screen max-h-screen text-white">
+		<main class="flex flex-col bg-primary w-full min-h-screen overflow-hidden h-screen max-h-screen text-white">
+
 			<WindowFrame />
-			<div class="flex flex-col flex-1 px-8 max-h-screen">
+			<div class="flex flex-col px-8">
 				<Navbar />
-				<div class="max-h-full overflow-y-auto">
-					<AnimatedRoutes>
-						{props.children}
-					</AnimatedRoutes>
+			</div>
+
+			<div class="relative h-full w-full overflow-hidden">
+				<div class="absolute top-0 left-0 flex flex-col h-full w-full overflow-x-hidden">
+					<div class="absolute top-0 left-0 flex flex-col h-full w-full overflow-x-hidden overflow-y-auto px-8">
+						<AnimatedRoutes>
+							{props.children}
+						</AnimatedRoutes>
+					</div>
 				</div>
 			</div>
 		</main>

src/ui/components/Navbar.tsx

@@ -27,7 +27,7 @@ function Navbar() {
 	let profileButton!: HTMLButtonElement;
 
 	return (
-		<div class="flex flex-row *:flex-1 items-center h-15 mx-2">
+		<div class="flex flex-row *:flex-1 items-center min-h-[60px] h-15 mx-2">
 			<div>
 				<PolyfrostFull />
 			</div>

src/ui/pages/Home.tsx

@@ -70,7 +70,10 @@ 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" style={{ '-webkit-transform': 'translateZ(0)' }}>
+				<div
+					class="absolute h-full w-full group-hover:!scale-110 transition-transform"
+					style={{ '-webkit-transform': 'translateZ(0)' }} // WebKit starts flickering whenever we try scrolling. This is a 'fix'
+				>
 					<img
 						class={`object-cover h-full w-full ${props.cover ? '' : ' filter grayscale'}`}
 						src={props.cover || defaultCover}