Fix List Item Badges (#141)

unikorn-cloud · Jan 28, 2025 · 8c7d43e · 8c7d43e
1 parent b7c8c0a
commit 8c7d43e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 25 deletions.
diff --git a/charts/ui/Chart.yaml b/charts/ui/Chart.yaml
@@ -4,8 +4,8 @@ description: A Helm chart for deploying Unikorn UI
 
 type: application
 
-version: v0.3.4
-appVersion: v0.3.4
+version: v0.3.5-rc1
+appVersion: v0.3.5-rc1
 
 icon: https://assets.unikorn-cloud.org/assets/images/logos/dark-on-light/icon.png
 

diff --git a/src/lib/layouts/Badge.svelte b/src/lib/layouts/Badge.svelte
@@ -8,9 +8,7 @@
 	let { icon = '', iconcolor = '', children }: Props = $props();
 </script>
 
-<div
-	class="badge variant-outline-soft bg-surface-50-900-token shadow flex gap-2 items-center self-start"
->
+<div class="badge variant-outline-soft bg-surface-50-900-token shadow flex gap-2 items-center">
 	{#if icon !== ''}
 		<iconify-icon class="text-base {iconcolor}" {icon}></iconify-icon>
 	{/if}

diff --git a/src/lib/layouts/ShellListItemBadges.svelte b/src/lib/layouts/ShellListItemBadges.svelte
@@ -12,7 +12,7 @@
 	let { metadata, extra }: Props = $props();
 </script>
 
-<div class="flex flex-col gap-2 items-center">
+<div class="flex gap-2 items-center">
 	{#if metadata}
 		<Badge icon={Status.icon(metadata)} iconcolor={Status.color(metadata)}>
 			{metadata.provisioningStatus}

diff --git a/src/routes/(shell)/compute/clusters/+page.svelte b/src/routes/(shell)/compute/clusters/+page.svelte
@@ -162,32 +162,36 @@
 				{#snippet footer()}
 					<div class="flex flex-col gap-4 pt-4">
 						{#if resource.status?.workloadPools}
-							<div class="grid grid-cols-[repeat(4,max-content)_1fr] gap-4 items-center">
+							<div class="flex flex-col gap-4">
 								<div class="col-span-full flex gap-2 items-center">
 									<div class="h4">Machine Status</div>
 								</div>
 
 								{#each resource.status.workloadPools || [] as pool}
 									{#each pool.machines || [] as machine}
-										<div class="font-bold col-start-1">{machine.hostname}</div>
-										<Badge
-											icon={Status.statusIcon(machine.status)}
-											iconcolor={Status.statusColor(machine.status)}>{machine.status}</Badge
-										>
-
-										{#if machine.privateIP}
-											<div class="text-sm">
-												<span class="font-bold">Private IP</span>
-												{machine.privateIP}
+										<div class="flex gap-4 items-center">
+											<div class="font-bold col-start-1">{machine.hostname}</div>
+											<Badge
+												icon={Status.statusIcon(machine.status)}
+												iconcolor={Status.statusColor(machine.status)}>{machine.status}</Badge
+											>
+
+											<div class="flex flex-col gap-2">
+												{#if machine.privateIP}
+													<div class="text-sm">
+														<span class="font-bold">Private IP</span>
+														{machine.privateIP}
+													</div>
+												{/if}
+
+												{#if machine.publicIP}
+													<div class="text-sm">
+														<span class="font-bold">Public IP</span>
+														{machine.publicIP}
+													</div>
+												{/if}
 											</div>
-										{/if}
-
-										{#if machine.publicIP}
-											<div class="text-sm">
-												<span class="font-bold">Public IP</span>
-												{machine.publicIP}
-											</div>
-										{/if}
+										</div>
 									{/each}
 								{/each}
 							</div>