From 1dad80e5575a3b8f6bcd555d63dfca0aeaae0e0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= <franjurmanovic@gmail.com>
Date: Thu, 26 Mar 2026 21:52:33 +0100
Subject: [PATCH] fix: mobile responsiveness - declutter the header

---
 src/components/server/ServerHeader.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/server/ServerHeader.tsx b/src/components/server/ServerHeader.tsx
index b428790..1691cc0 100755
--- a/src/components/server/ServerHeader.tsx
+++ b/src/components/server/ServerHeader.tsx
@@ -49,18 +49,18 @@ export function ServerHeader({ server, user }: ServerHeaderProps) {
 
 	return (
 		<>
-			<header className="flex h-12 items-center justify-between border-b border-border-muted px-5">
+			<header className="flex flex-col gap-2 border-b border-border-muted px-5 py-2 sm:h-12 sm:flex-row sm:items-center sm:justify-between sm:gap-0 sm:py-0">
 				<div className="flex items-center gap-2 text-sm">
 					<Link href="/dashboard" className="text-blue hover:underline">Servers</Link>
 					<span className="text-subtle">/</span>
 					<span className="font-semibold text-primary">{server.name}</span>
 				</div>
-				<div className="flex items-center gap-2">
+				<div className="flex flex-wrap items-center gap-2">
 					<Badge variant={
 						server.status === ServiceStatus.Running ? 'green' :
 						server.status === ServiceStatus.Stopped ? 'gray' : 'yellow'
 					}>
-						● {serviceStatusToString(server.status)}
+						● <span className="hidden sm:inline">{serviceStatusToString(server.status)}</span>
 					</Badge>
 					<Button variant="ghost" size="sm" onClick={startServer} disabled={server.status === ServiceStatus.Running || disabled || isPending}>Start</Button>
 					<Button variant="ghost" size="sm" onClick={restartServer} disabled={server.status === ServiceStatus.Stopped || disabled || isPending}>Restart</Button>