From 3f6ad5510afe4af8a1305a829eee45cd72b5a1de Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 20 Dec 2025 20:16:21 -0800
Subject: [PATCH] improve roster UI with sticky names and better spacing

---
 src/routes/(app)/crew/roster/+page.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/routes/(app)/crew/roster/+page.svelte b/src/routes/(app)/crew/roster/+page.svelte
index b3b1bf03..8a29c1dd 100644
--- a/src/routes/(app)/crew/roster/+page.svelte
+++ b/src/routes/(app)/crew/roster/+page.svelte
@@ -356,11 +356,13 @@
 
 	.roster-content {
 		padding: spacing.$unit-2x;
+		display: flex;
+		flex-direction: column;
+		gap: spacing.$unit-2x;
 	}
 
 	.search-section {
 		position: relative;
-		margin-bottom: spacing.$unit-2x;
 
 		// Svelecte CSS variable overrides
 		--sv-bg: var(--select-contained-bg);
@@ -462,11 +464,11 @@
 	}
 
 	.roster-header {
-		padding: spacing.$unit spacing.$unit-2x;
+		padding: spacing.$unit spacing.$unit-2x spacing.$unit 0;
 	}
 
 	.roster-row {
-		padding: spacing.$unit spacing.$unit-2x;
+		padding: spacing.$unit spacing.$unit-2x spacing.$unit 0;
 		border-radius: layout.$card-corner;
 		transition: background-color 0.1s;
 
@@ -481,6 +483,11 @@
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
+		position: sticky;
+		left: 0;
+		padding-left: spacing.$unit-2x;
+		background: var(--card-bg);
+		z-index: 1;
 
 		.member-name {
 			font-weight: typography.$medium;
@@ -492,6 +499,10 @@
 		}
 	}
 
+	.roster-row:hover .member-col {
+		background: var(--list-cell-bg-hover);
+	}
+
 	.item-col {
 		width: 70px;
 		display: flex;