feat: enhance RiskStack component and add SBOM status message

Author: rbjornstad

package-lock.json

@@ -65,7 +65,9 @@
 			{#if scores[level as keyof typeof scores] > 0}
 				<div class="label-item">
 					<span class="label-dot {level}"></span>
-					{capitalizeFirstLetter(level)}: {summary[level as keyof typeof summary]}
+					{capitalizeFirstLetter(level)}: {summary[
+						level as keyof typeof summary
+					]}&NonBreakingSpace;(x5)
 				</div>
 			{/if}
 		{/each}
@@ -112,6 +114,7 @@
 	.label-item {
 		display: flex;
 		align-items: center;
+
 		font-size: 0.9rem;
 	}
 

src/lib/components/RiskStack.svelte

@@ -97,6 +97,10 @@
 						</ul>
 					</BodyShort>
 				{/if}
+
+				{#if workloadsVulnerable?.length === 0 && workloadWithoutSbom?.length === 0}
+					<BodyShort>All workloads have a registered SBOM and an acceptable risk score.</BodyShort>
+				{/if}
 				<!--{#if $TeamOverview.data?.team.workloads.edges}
 				{#each $TeamOverview.data.team.workloads.edges as workload (workload.node.id)}
 					{#if workload.node.status.errors.length > 0}
@@ -190,7 +194,7 @@
 	}
 	.two-columns {
 		display: grid;
-		grid-template-columns: 200px 1fr;
+		grid-template-columns: 270px 1fr;
 		gap: var(--spacing-layout);
 	}
 	/*.workloads-grid {