From 59b6d170e89a8115336f25d566645aab37f8eaf7 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjunkomath@gmail.com>
Date: Wed, 1 Jul 2026 19:28:49 +1000
Subject: [PATCH] Improve server services list layout and profile dropdown
 styling

Show environment inline with project name instead of stacked, and make
the user's name more prominent (and the dropdown wider) in the nav menu.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/app/(dashboard)/layout-client.tsx     | 10 ++++++++--
 web/components/server/server-services.tsx |  6 +++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/app/(dashboard)/layout-client.tsx b/web/app/(dashboard)/layout-client.tsx
index 606c47c7..1bbc205b 100644
--- a/web/app/(dashboard)/layout-client.tsx
+++ b/web/app/(dashboard)/layout-client.tsx
@@ -119,10 +119,16 @@ function DashboardHeader({
 					>
 						<User className="size-4" />
 					</DropdownMenuTrigger>
-					<DropdownMenuContent align="end" sideOffset={8}>
+					<DropdownMenuContent
+						align="end"
+						sideOffset={8}
+						className="w-40"
+					>
 						<DropdownMenuGroup>
 							<DropdownMenuLabel>
-								<span className="block font-medium">{name}</span>
+								<span className="block truncate text-sm font-semibold">
+									{name}
+								</span>
 								<span className="block truncate text-xs font-normal text-muted-foreground">
 									{email}
 								</span>
diff --git a/web/components/server/server-services.tsx b/web/components/server/server-services.tsx
index ac75e0bb..1b1240fb 100644
--- a/web/components/server/server-services.tsx
+++ b/web/components/server/server-services.tsx
@@ -34,11 +34,11 @@ export async function ServerServices({ serverId }: { serverId: string }) {
 				<div className="space-y-5">
 					{groups.map((group) => (
 						<div key={group.key} className="space-y-2">
-							<div>
+							<div className="flex items-center gap-2">
 								<p className="font-medium text-sm">{group.projectName}</p>
-								<p className="text-xs text-muted-foreground">
+								<span className="text-xs text-muted-foreground">
 									{group.environmentName}
-								</p>
+								</span>
 							</div>
 							<div className="divide-y rounded-lg border">
 								{group.services.map((service) => (