From 7733d4b870debbf57c5ce312dd4242f1e0aa1bc3 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Mon, 27 Oct 2025 20:55:28 +0000
Subject: [PATCH] Adjust header layout and widen guest name column

---
 frontend-modern/src/App.tsx                            | 6 +++---
 frontend-modern/src/components/Dashboard/Dashboard.tsx | 2 +-
 frontend-modern/src/components/Dashboard/GuestRow.tsx  | 2 +-
 frontend-modern/src/index.css                          | 5 ++---
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend-modern/src/App.tsx b/frontend-modern/src/App.tsx
index b560bdd..61f0772 100644
--- a/frontend-modern/src/App.tsx
+++ b/frontend-modern/src/App.tsx
@@ -940,8 +940,8 @@ function AppLayout(props: {
   return (
     <div class="pulse-shell">
       {/* Header */}
-      <div class="header mb-3 flex flex-wrap items-center gap-2 sm:grid sm:grid-cols-[1fr_auto_1fr] sm:items-center sm:gap-0">
-        <div class="flex flex-1 items-center gap-2 sm:flex-initial sm:gap-2 sm:col-start-2 sm:col-end-3 sm:justify-self-center">
+      <div class="header mb-3 flex items-center justify-between gap-2 sm:grid sm:grid-cols-[1fr_auto_1fr] sm:items-center sm:gap-0">
+        <div class="flex items-center gap-2 sm:flex-initial sm:gap-2 sm:col-start-2 sm:col-end-3 sm:justify-self-center">
           <div class="flex items-center gap-2">
             <svg
               width="20"
@@ -978,7 +978,7 @@ function AppLayout(props: {
             </Show>
           </div>
         </div>
-        <div class="header-controls flex w-full flex-wrap items-center gap-2 justify-end sm:col-start-3 sm:col-end-4 sm:w-auto sm:justify-end sm:justify-self-end">
+        <div class="header-controls flex items-center gap-2 justify-end sm:col-start-3 sm:col-end-4 sm:w-auto sm:justify-end sm:justify-self-end">
           <Show when={props.hasAuth() && !props.needsAuth()}>
             <div class="flex items-center gap-2">
               <Show when={props.proxyAuthInfo()?.username}>
diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index ec99fe9..4b50458 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -910,7 +910,7 @@ export function Dashboard(props: DashboardProps) {
                 <thead>
                   <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
                     <th
-                      class="pl-4 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[130px] sm:w-[150px] lg:w-[180px] xl:w-[200px] 2xl:w-[240px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                      class="pl-4 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[160px] sm:w-[200px] lg:w-[240px] xl:w-[280px] 2xl:w-[340px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                       onClick={() => handleSort('name')}
                       onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
                       tabindex="0"
diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index af500a9..b4202c6 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -409,7 +409,7 @@ export function GuestRow(props: GuestRowProps) {
   // Get first cell styling
   const firstCellClass = createMemo(() => {
     const base =
-      'py-0.5 pr-2 whitespace-nowrap relative w-[130px] sm:w-[150px] lg:w-[180px] xl:w-[200px] 2xl:w-[240px]';
+      'py-0.5 pr-2 whitespace-nowrap relative w-[160px] sm:w-[200px] lg:w-[240px] xl:w-[280px] 2xl:w-[340px]';
     const indent = 'pl-4';
     return `${base} ${indent}`;
   });
diff --git a/frontend-modern/src/index.css b/frontend-modern/src/index.css
index 412d12e..a5a720b 100644
--- a/frontend-modern/src/index.css
+++ b/frontend-modern/src/index.css
@@ -355,10 +355,9 @@ body,
   white-space: nowrap;
 }
 
-/* Keep name column slightly flexible while maintaining stability */
+/* Keep name column single line to avoid wrapping while giving it more space */
 .table-fixed td:first-child {
-  white-space: normal;
-  word-break: break-word;
+  white-space: nowrap;
 }
 
 /* Hide scrollbars but keep functionality */