From f9ae4c184e2c5a4f144c037af2cdd9818a9a6971 Mon Sep 17 00:00:00 2001
From: "Amy J. Ko" <ajko@uw.edu>
Date: Fri, 23 Aug 2024 10:10:12 -0700
Subject: [PATCH] More visual improvements to how rendering.

---
 src/lib/HowView.svelte                          | 17 +++++++++++------
 .../[orgid]/process/[processid]/+page.svelte    |  2 +-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/lib/HowView.svelte b/src/lib/HowView.svelte
index 64f462e..1983e91 100644
--- a/src/lib/HowView.svelte
+++ b/src/lib/HowView.svelte
@@ -19,6 +19,7 @@
 	$: parent = $org.getHowParent(how.id);
 	$: index = parent?.how.indexOf(how.id) ?? -1;
 	$: length = parent?.how.length ?? -1;
+	$: subhows = how.how.map((h) => $org.getHow(h)).filter((h) => h !== undefined);
 
 	const org = getOrg();
 	const db = getDB();
@@ -264,11 +265,13 @@
 		{/if}
 		<ARCI {how} verbose={false} {editable} />
 	</div>
-	<div class="steps">
-		{#each how.how.map((h) => $org.getHow(h)).filter((h) => h !== undefined) as subhow (subhow.id)}
-			<svelte:self how={subhow} {process} {editable} />
-		{/each}
-	</div>
+	{#if subhows.length > 0}
+		<div class="steps">
+			{#each subhows as subhow (subhow.id)}
+				<svelte:self how={subhow} {process} {editable} />
+			{/each}
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -317,6 +320,8 @@
 		margin-inline-start: 1em;
 		display: flex;
 		flex-direction: column;
-		gap: calc(2 * var(--padding));
+		gap: 1em;
+		padding-left: 1em;
+		border-left: 1px solid var(--border);
 	}
 </style>
diff --git a/src/routes/org/[orgid]/process/[processid]/+page.svelte b/src/routes/org/[orgid]/process/[processid]/+page.svelte
index b0e87e3..6da67b8 100644
--- a/src/routes/org/[orgid]/process/[processid]/+page.svelte
+++ b/src/routes/org/[orgid]/process/[processid]/+page.svelte
@@ -367,6 +367,6 @@
 		margin-block-start: calc(2 * var(--padding));
 		display: flex;
 		flex-direction: column;
-		gap: var(--padding);
+		gap: 1em;
 	}
 </style>