Refine grouped guest indentation

This commit is contained in:
rcourtman 2025-10-29 08:43:02 +00:00
parent b3285c05c8
commit 7ee417a629
2 changed files with 8 additions and 5 deletions

View file

@ -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}`;
});

View file

@ -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