From 00bc9361fb5a7c950b29b1986b379abee1d3c264 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Sun, 17 Mar 2024 11:48:24 +0100
Subject: [PATCH] feat: Overflow fixes - I. Hate. Webdev.

---
 src/ui/App.tsx               | 18 ++++++++++++------
 src/ui/components/Navbar.tsx |  2 +-
 src/ui/pages/Home.tsx        |  5 ++++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index e0845a8e..f184cb70 100644
--- a/src/ui/App.tsx
+++ b/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>
diff --git a/src/ui/components/Navbar.tsx b/src/ui/components/Navbar.tsx
index f9241aa1..17e7f09d 100644
--- a/src/ui/components/Navbar.tsx
+++ b/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>
diff --git a/src/ui/pages/Home.tsx b/src/ui/pages/Home.tsx
index a15f4947..a8fd6b53 100644
--- a/src/ui/pages/Home.tsx
+++ b/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}