Fix rendering of upstream commits when remote commits exist

app/src/lib/components/CommitLines.svelte

@@ -31,6 +31,8 @@
 		commit={localCommit?.status == 'remote' ? localCommit : undefined}
 		line={localCommit?.status == 'remote' || remoteLine}
 		root={localLine}
+		{remoteCommit}
+		{upstreamLine}
 		{first}
 		{base}
 	/>

app/src/lib/components/CommitList.svelte

@@ -32,21 +32,21 @@
 						<CommitLines
 							{hasLocalColumn}
 							{hasShadowColumn}
-							first={idx == 0}
+							upstreamLine
 							localLine={hasLocalColumn}
 							remoteCommit={commit}
-							upstreamLine
+							first={idx == 0}
 						/>
 						<CommitListItem {commit}>
 							<CommitCard
+								type="upstream"
 								branch={$branch}
 								{commit}
-								commitUrl={$baseBranch?.commitUrl(commit.id)}
-								isHeadCommit={commit.id === headCommit?.id}
 								{isUnapplied}
 								first={idx == 0}
 								last={idx == $unknownCommits.length - 1}
-								type="upstream"
+								commitUrl={$baseBranch?.commitUrl(commit.id)}
+								isHeadCommit={commit.id === headCommit?.id}
 							/>
 						</CommitListItem>
 					</div>
@@ -85,7 +85,12 @@
 				{/each}
 			{/if}
 			{#if $remoteCommits.length > 0}
-				<CommitLines {hasShadowColumn} {hasLocalColumn} localLine />
+				<CommitLines
+					{hasShadowColumn}
+					{hasLocalColumn}
+					upstreamLine={hasUnknownCommits}
+					localLine
+				/>
 				{#each $remoteCommits as commit, idx (commit.id)}
 					<div class="flex">
 						<CommitLines

app/src/lib/components/RemoteLine.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import Avatar from './Avatar.svelte';
-	import type { Commit } from '$lib/vbranches/types';
+	import type { Commit, RemoteCommit } from '$lib/vbranches/types';
 
 	export let commit: Commit | undefined;
+	export let remoteCommit: RemoteCommit | undefined;
 	export let base: boolean;
 	export let first: boolean;
 	export let line: boolean;
 	export let root: boolean;
+	export let upstreamLine: boolean;
 
 	$: hasRoot = isRoot(commit);
 
@@ -39,7 +41,12 @@
 		</div>
 	{:else}
 		{#if line}
-			<div class="remote-line" class:first></div>
+			{#if upstreamLine}
+				<div class="remote-line tip" class:upstream={upstreamLine}></div>
+			{/if}
+			<div class="remote-line" class:short={first} />
+		{:else if upstreamLine}
+			<div class="remote-line upstream" class:short={first} />
 		{/if}
 		{#if hasRoot}
 			<div class="root" />
@@ -50,6 +57,12 @@
 				<Avatar {author} status={commit.status} />
 			</div>
 		{/if}
+		{#if remoteCommit}
+			{@const author = remoteCommit.author}
+			<div class="avatar" class:first>
+				<Avatar {author} status={remoteCommit.status} />
+			</div>
+		{/if}
 	{/if}
 </div>
 
@@ -70,7 +83,10 @@
 			top: calc(var(--size-40) + var(--size-2));
 		}
 		&.short {
-			top: 1rem;
+			top: 3rem;
+		}
+		&.tip {
+			bottom: calc(100% - 2.625rem);
 		}
 		&.dashed {
 			background: repeating-linear-gradient(
@@ -81,6 +97,9 @@
 				var(--clr-commit-remote) 0.4375rem
 			);
 		}
+		&.upstream {
+			background-color: var(--clr-commit-upstream);
+		}
 	}
 
 	.avatar {