From 7ee417a6298d717cf743163a57a8d9afa1976912 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Wed, 29 Oct 2025 08:43:02 +0000
Subject: [PATCH] Refine grouped guest indentation

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

diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index 0dde1d6..4018860 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -19,6 +19,9 @@ const editingValues = new Map<string, string>();
 // Signal to trigger reactivity when editing values change
 const [editingValuesVersion, setEditingValuesVersion] = createSignal(0);
 
+const GROUPED_FIRST_CELL_INDENT = 'pl-5 sm:pl-6 lg:pl-8';
+const DEFAULT_FIRST_CELL_INDENT = 'pl-4';
+
 const buildGuestId = (guest: Guest) => {
   if (guest.id) return guest.id;
   if (guest.instance === guest.node) {
@@ -411,9 +414,7 @@ export function GuestRow(props: GuestRowProps) {
   const firstCellClass = createMemo(() => {
     const base =
       'py-0.5 pr-2 whitespace-nowrap relative w-[160px] sm:w-[200px] lg:w-[240px] xl:w-[280px] 2xl:w-[340px]';
-    const indent = props.isGroupedView
-      ? 'pl-5 sm:pl-6 lg:pl-8'
-      : 'pl-4';
+    const indent = props.isGroupedView ? GROUPED_FIRST_CELL_INDENT : DEFAULT_FIRST_CELL_INDENT;
     return `${base} ${indent}`;
   });
 
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index 946287a..e6bb22b 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -308,6 +308,8 @@ const buildRowId = (host: DockerHost, row: DockerRow) => {
   return `service:${host.id}:${row.service.id ?? row.service.name}`;
 };
 
+const GROUPED_RESOURCE_INDENT = 'pl-5 sm:pl-6 lg:pl-8';
+
 const DockerHostGroupHeader: Component<{ host: DockerHost; colspan: number }> = (props) => {
   const displayName = props.host.displayName || props.host.hostname || props.host.id;
 
@@ -580,7 +582,7 @@ const DockerContainerRow: Component<{
         onClick={toggle}
         aria-expanded={expanded()}
       >
-        <td class="pl-5 sm:pl-6 lg:pl-8 pr-2 py-0.5">
+        <td class={`${GROUPED_RESOURCE_INDENT} pr-2 py-0.5`}>
           <div class="flex items-center gap-1.5 min-w-0">
             {/* Name - show input when editing, otherwise show name with optional link */}
             <Show
@@ -1016,7 +1018,7 @@ const DockerServiceRow: Component<{
         onClick={toggle}
         aria-expanded={expanded()}
       >
-        <td class="pl-5 sm:pl-6 lg:pl-8 pr-2 py-0.5">
+        <td class={`${GROUPED_RESOURCE_INDENT} pr-2 py-0.5`}>
           <div class="flex items-center gap-1.5 min-w-0">
             {/* Name - show input when editing, otherwise show name with optional link */}
             <Show