From 76d18e2645fdbb18708f96d0aa834f6f3ddb050c Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 14 Jul 2026 15:29:52 +0200
Subject: [PATCH] Fix mobile layout issues in admin sidebar and top-header

---
 src/app/admin/layout.tsx                      |  2 +-
 src/components/admin/admin-mobile-wrapper.tsx |  4 +++-
 src/components/top-header.tsx                 | 21 ++++++++++---------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index d850eb08..0c806e3d 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -398,7 +398,7 @@ async function Sidebar({
 	return (
 		<aside
 			data-admin
-			className="sticky top-0 self-start h-auto lg:h-screen overflow-y-auto bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col"
+			className="max-lg:static sticky top-0 self-start h-full lg:h-screen overflow-y-auto bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col"
 		>
 			<div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--admin-border)]">
 				<span
diff --git a/src/components/admin/admin-mobile-wrapper.tsx b/src/components/admin/admin-mobile-wrapper.tsx
index 8169b054..989f70af 100644
--- a/src/components/admin/admin-mobile-wrapper.tsx
+++ b/src/components/admin/admin-mobile-wrapper.tsx
@@ -25,7 +25,9 @@ export function AdminMobileWrapper({
 		<div className="min-h-screen bg-[var(--admin-canvas)] flex flex-col lg:flex-row">
 			{/* Mobile header */}
 			<div
-				className="lg:hidden sticky top-0 z-50 flex items-center gap-3 px-4 py-3 border-b"
+				className={`lg:hidden sticky top-0 flex items-center gap-3 px-4 py-3 border-b ${
+					open ? "z-30" : "z-50"
+				}`}
 				style={{
 					backgroundColor: "var(--admin-sidebar-background)",
 					borderColor: "var(--admin-border)",
diff --git a/src/components/top-header.tsx b/src/components/top-header.tsx
index 638ccf58..934e1e43 100644
--- a/src/components/top-header.tsx
+++ b/src/components/top-header.tsx
@@ -15,9 +15,9 @@ function Currency({
 	label: string;
 }) {
 	return (
-		<div className="flex gap-x-3 sm:gap-x-2 items-center">
+		<div className="flex gap-x-1 sm:gap-x-2 items-center">
 			<div
-				className={`h-[25px] w-[25px] rounded-full outline-offset-[3px] ${icon}`}
+				className={`h-[20px] w-[20px] sm:h-[25px] sm:w-[25px] rounded-full outline-offset-[3px] ${icon}`}
 			/>
 			<div
 				style={{
@@ -26,7 +26,7 @@ function Currency({
 				}}
 			>
 				<span
-					className="font-semibold"
+					className="font-semibold text-xs sm:text-sm"
 					style={{
 						color:
 							"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
@@ -34,7 +34,7 @@ function Currency({
 				>
 					{amount.toLocaleString()}
 				</span>{" "}
-				<span>{label}</span>
+				<span className="hidden sm:inline text-xs">{label}</span>
 			</div>
 		</div>
 	);
@@ -77,8 +77,8 @@ export async function TopHeader() {
 
 	return (
 		<div style={{ backgroundColor: "var(--color-navbar)" }}>
-			<div className="max-w-7xl min-h-[60px] px-4 flex items-center justify-between mx-auto">
-				<div className="flex flex-wrap gap-x-3 sm:gap-x-6">
+			<div className="max-w-7xl min-h-[44px] sm:min-h-[60px] px-2 sm:px-4 flex items-center justify-between mx-auto">
+				<div className="flex flex-wrap gap-x-2 sm:gap-x-6">
 					<Currency icon="nav-credit-icon" amount={credits} label="Credits" />
 					<Currency icon="nav-ducket-icon" amount={duckets} label="Duckets" />
 					<Currency
@@ -92,13 +92,14 @@ export async function TopHeader() {
 					{isStaff ? (
 						<details className="relative">
 							<summary
-								className="list-none cursor-pointer font-semibold [&::-webkit-details-marker]:hidden"
+								className="list-none cursor-pointer font-semibold text-xs sm:text-sm [&::-webkit-details-marker]:hidden"
 								style={{
 									color:
 										"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
 								}}
 							>
-								Administration
+								<span className="hidden sm:inline">Administration</span>
+								<span className="sm:hidden">Admin</span>
 							</summary>
 							<div
 								role="menu"
@@ -142,7 +143,7 @@ export async function TopHeader() {
 								unoptimized
 							/>
 							<span
-								className="-ml-2 font-semibold"
+								className="hidden sm:inline -ml-2 font-semibold"
 								style={{
 									color:
 										"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
@@ -153,7 +154,7 @@ export async function TopHeader() {
 						</summary>
 						<div
 							role="menu"
-							className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
+							className="dropdown-menu fixed sm:absolute right-2 sm:right-0 top-auto sm:top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
 						>
 							<Link href="/me" className="dropdown-item" role="menuitem">
 								My dashboard