From 9e662e3f8c724647000535c890a1aa4a8e7f102d Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Thu, 21 Aug 2025 11:36:51 +0200
Subject: [PATCH] fix: floating tab bar from not being visible when scrolling

---
 .../frontend/src/components/SheetPage.tsx     |  2 +-
 .../frontend/src/components/Tabs.tsx          | 22 ++++++++++---------
 .../frontend/src/routes/app/cluster/route.tsx |  2 +-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/oneclient/frontend/src/components/SheetPage.tsx b/apps/oneclient/frontend/src/components/SheetPage.tsx
index ec5888fe..0480121a 100644
--- a/apps/oneclient/frontend/src/components/SheetPage.tsx
+++ b/apps/oneclient/frontend/src/components/SheetPage.tsx
@@ -70,7 +70,7 @@ export function SheetPage({
 				</div>
 
 				<OverlayScrollbarsComponent className="flex flex-col flex-1 mask-t-from-97% pt-4 relative" ref={ref => setScrollContainerRef(ref?.osInstance()?.elements().content ?? null)}>
-					<div className="flex flex-col mx-12 gap-4 flex-1 h-full min-h-full">
+					<div className="flex flex-col mx-12 gap-4 flex-1 min-h-full">
 						<motion.div className="w-full" ref={headerLargeRef} style={{ opacity: largeOpacity }}>
 							{headerLarge}
 						</motion.div>
diff --git a/apps/oneclient/frontend/src/components/Tabs.tsx b/apps/oneclient/frontend/src/components/Tabs.tsx
index c5704500..80c2ec3c 100644
--- a/apps/oneclient/frontend/src/components/Tabs.tsx
+++ b/apps/oneclient/frontend/src/components/Tabs.tsx
@@ -12,16 +12,18 @@ export function TabList({
 	ref?: React.Ref<HTMLDivElement>;
 }) {
 	return (
-		<div
-			className={twMerge(
-				'flex flex-row gap-2 border border-transparent bg-page-elevated transition-all',
-				floating
-					? 'px-6 mx-4 py-3 shadow-lg border-ghost-overlay rounded-xl'
-					: 'px-10 py-6 rounded-2xl',
-				className,
-			)} ref={ref}
-		>
-			{children}
+		<div className="flex justify-stretch items-center sticky top-0 z-10 min-h-[74px] h-[74px] max-h-[74px] w-full" ref={ref}>
+			<div
+				className={twMerge(
+					'flex-1 flex flex-row gap-2 border border-transparent bg-page-elevated transition-all',
+					floating
+						? 'px-6 mx-4 py-3 shadow-lg border-ghost-overlay rounded-xl'
+						: 'px-10 py-6 rounded-2xl',
+					className,
+				)}
+			>
+				{children}
+			</div>
 		</div>
 	);
 }
diff --git a/apps/oneclient/frontend/src/routes/app/cluster/route.tsx b/apps/oneclient/frontend/src/routes/app/cluster/route.tsx
index 2fbffa42..832f6573 100644
--- a/apps/oneclient/frontend/src/routes/app/cluster/route.tsx
+++ b/apps/oneclient/frontend/src/routes/app/cluster/route.tsx
@@ -64,7 +64,7 @@ function RouteComponent() {
 			headerSmall={<HeaderSmall />}
 			scrollContainerRef={scrollContainerRef}
 		>
-			<TabList className="sticky top-0 z-10 shadow-lg" floating={floating} ref={tabListRef}>
+			<TabList floating={floating} ref={tabListRef}>
 				<Tab from={Route.id} search={search} to="/app/cluster/overview">Overview</Tab>
 				<Tab from={Route.id} search={search} to="/app/cluster/logs">Logs</Tab>
 				<Tab from={Route.id} search={{ ...search, packageType: 'mod' }} to="/app/cluster/browser">Browser</Tab>