From f4cca17c797c2da83b9676efe43d516809b7ac12 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Mon, 28 Oct 2024 16:50:30 +0100
Subject: [PATCH 1/8] try the first design

---
 .../lib/branch/StackingSeriesHeader.svelte    |  8 +++--
 .../src/lib/branch/StackingStatusIcon.svelte  | 31 ++++++++++++++++---
 apps/desktop/src/lib/stack/StackSeries.svelte |  7 ++++-
 3 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
index b8c83d8a7a..e5a67447ca 100644
--- a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
+++ b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
@@ -30,9 +30,11 @@
 	interface Props {
 		currentSeries: PatchSeries;
 		isTopSeries: boolean;
+		sequanceId: number;
+		seqenceAmount: number;
 	}
 
-	const { currentSeries, isTopSeries }: Props = $props();
+	const { currentSeries, isTopSeries, sequanceId, seqenceAmount }: Props = $props();
 
 	let descriptionVisible = $state(false);
 
@@ -183,7 +185,9 @@
 			icon={branchType === 'integrated' ? 'tick-small' : 'remote-branch-small'}
 			iconColor="var(--clr-core-ntrl-100)"
 			color={lineColor}
-			lineBottom={currentSeries.patches.length > 0}
+			{sequanceId}
+			{seqenceAmount}
+			lineBottom={currentSeries.patches.length > 0 || branch.series.length > 1}
 		/>
 		<div class="text-14 text-bold branch-info__name">
 			<span class:no-upstream={!gitHostBranch} class="remote-name">
diff --git a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
index 6e758bba64..06c149a5b6 100644
--- a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
+++ b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
@@ -9,6 +9,8 @@
 		color?: string;
 		lineTop?: boolean;
 		lineBottom?: boolean;
+		sequanceId: number;
+		seqenceAmount: number;
 	}
 
 	const {
@@ -16,7 +18,9 @@
 		iconColor,
 		color = FALLBACK_COLOR,
 		lineTop = true,
-		lineBottom = true
+		lineBottom = true,
+		sequanceId,
+		seqenceAmount
 	}: Props = $props();
 </script>
 
@@ -25,8 +29,16 @@
 		class="stack__status--bar"
 		style:--bg-color={lineTop ? color : 'var(--clr-transparent)'}
 	></div>
+
 	<div class="stack__status--icon" style:--bg-color={color} style:--icon-color={iconColor}>
-		<Icon name={icon} />
+		{#if seqenceAmount > 1}
+			<span
+				class="text-10 text-bold stack__status--sequence-label"
+				class:small-sequance-label={seqenceAmount >= 10}>{sequanceId}/{seqenceAmount}</span
+			>
+		{:else}
+			<Icon name={icon} />
+		{/if}
 	</div>
 	<div
 		class="stack__status--bar"
@@ -47,8 +59,9 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 20px;
-			height: 24px;
+			/* width: 20px; */
+			height: 22px;
+			padding: 0 2px;
 			border-radius: var(--radius-m);
 			background-color: var(--bg-color);
 			color: var(--icon-color, var(--clr-text-1));
@@ -60,5 +73,15 @@
 			margin: 0 20px;
 			background: var(--bg-color);
 		}
+
+		& .stack__status--sequence-label {
+			padding: 0 3px;
+			text-align: center;
+			line-height: 1;
+		}
+
+		& .small-sequance-label {
+			font-size: 9px;
+		}
 	}
 </style>
diff --git a/apps/desktop/src/lib/stack/StackSeries.svelte b/apps/desktop/src/lib/stack/StackSeries.svelte
index cfbc9afd6c..e4af50d912 100644
--- a/apps/desktop/src/lib/stack/StackSeries.svelte
+++ b/apps/desktop/src/lib/stack/StackSeries.svelte
@@ -30,7 +30,12 @@
 		<StackSeriesDividerLine {currentSeries} />
 	{/if}
 	<StackCurrentSeries {currentSeries}>
-		<StackingSeriesHeader {currentSeries} {isTopSeries} />
+		<StackingSeriesHeader
+			{currentSeries}
+			{isTopSeries}
+			sequanceId={branch.series.length - idx}
+			seqenceAmount={branch.series.length}
+		/>
 
 		{#if currentSeries.upstreamPatches.length === 0 && currentSeries.patches.length === 0}
 			<div class="branch-emptystate">

From a823f905609a03ea1dec88c0ea67068531db8100 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Mon, 28 Oct 2024 17:18:20 +0100
Subject: [PATCH 2/8] Update StackingStatusIcon.svelte

---
 .../src/lib/branch/StackingStatusIcon.svelte  | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
index 06c149a5b6..f91318b5d9 100644
--- a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
+++ b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Icon from '@gitbutler/ui/Icon.svelte';
+	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 
 	const FALLBACK_COLOR = 'var(--clr-scale-ntrl-80)';
 
@@ -30,16 +31,18 @@
 		style:--bg-color={lineTop ? color : 'var(--clr-transparent)'}
 	></div>
 
-	<div class="stack__status--icon" style:--bg-color={color} style:--icon-color={iconColor}>
-		{#if seqenceAmount > 1}
-			<span
-				class="text-10 text-bold stack__status--sequence-label"
-				class:small-sequance-label={seqenceAmount >= 10}>{sequanceId}/{seqenceAmount}</span
-			>
-		{:else}
-			<Icon name={icon} />
-		{/if}
-	</div>
+	<Tooltip text={seqenceAmount > 1 ? 'Sequence number' : ''}>
+		<div class="stack__status--icon" style:--bg-color={color} style:--icon-color={iconColor}>
+			{#if seqenceAmount > 1}
+				<span
+					class="text-10 text-bold stack__status--sequence-label"
+					class:small-sequance-label={seqenceAmount >= 10}>{sequanceId}/{seqenceAmount}</span
+				>
+			{:else}
+				<Icon name={icon} />
+			{/if}
+		</div>
+	</Tooltip>
 	<div
 		class="stack__status--bar"
 		style:--bg-color={lineBottom ? color : 'var(--clr-transparent)'}
@@ -60,8 +63,8 @@
 			align-items: center;
 			justify-content: center;
 			/* width: 20px; */
-			height: 22px;
-			padding: 0 2px;
+			/* height: 22px; */
+			padding: 4px 2px;
 			border-radius: var(--radius-m);
 			background-color: var(--bg-color);
 			color: var(--icon-color, var(--clr-text-1));
@@ -75,7 +78,7 @@
 		}
 
 		& .stack__status--sequence-label {
-			padding: 0 3px;
+			padding: 1px 3px 2px;
 			text-align: center;
 			line-height: 1;
 		}

From 7db907ce07815bfdfa3224e73e74963367eab547 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Mon, 28 Oct 2024 22:17:15 +0100
Subject: [PATCH 3/8] branch type added

---
 .../lib/branch/StackingSeriesHeader.svelte    |  1 +
 .../src/lib/branch/StackingStatusIcon.svelte  | 33 +++++++++++++++----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
index e5a67447ca..6669400145 100644
--- a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
+++ b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
@@ -181,6 +181,7 @@
 
 	<div class="branch-info">
 		<StackingStatusIcon
+			{branchType}
 			lineTop={isTopSeries ? false : true}
 			icon={branchType === 'integrated' ? 'tick-small' : 'remote-branch-small'}
 			iconColor="var(--clr-core-ntrl-100)"
diff --git a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
index f91318b5d9..9dc3930c57 100644
--- a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
+++ b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { type CommitStatus } from '$lib/vbranches/types';
 	import Icon from '@gitbutler/ui/Icon.svelte';
 	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 
@@ -12,6 +13,7 @@
 		lineBottom?: boolean;
 		sequanceId: number;
 		seqenceAmount: number;
+		branchType: CommitStatus;
 	}
 
 	const {
@@ -21,8 +23,20 @@
 		lineTop = true,
 		lineBottom = true,
 		sequanceId,
-		seqenceAmount
+		seqenceAmount,
+		branchType
 	}: Props = $props();
+
+	function branchNameType() {
+		console.log(branchType);
+		if (branchType === 'integrated') {
+			return 'Integrated branch';
+		} else if (branchType === 'localAndRemote') {
+			return 'Remote branch';
+		} else {
+			return 'Local branch';
+		}
+	}
 </script>
 
 <div class="stack__status gap">
@@ -31,11 +45,15 @@
 		style:--bg-color={lineTop ? color : 'var(--clr-transparent)'}
 	></div>
 
-	<Tooltip text={seqenceAmount > 1 ? 'Sequence number' : ''}>
+	<Tooltip
+		text={seqenceAmount > 1
+			? `${branchNameType()} ${sequanceId} of ${seqenceAmount}`
+			: branchNameType()}
+	>
 		<div class="stack__status--icon" style:--bg-color={color} style:--icon-color={iconColor}>
 			{#if seqenceAmount > 1}
 				<span
-					class="text-10 text-bold stack__status--sequence-label"
+					class="text-9 text-bold stack__status--sequence-label"
 					class:small-sequance-label={seqenceAmount >= 10}>{sequanceId}/{seqenceAmount}</span
 				>
 			{:else}
@@ -62,7 +80,8 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			/* width: 20px; */
+			min-width: 20px;
+			max-width: 24px;
 			/* height: 22px; */
 			padding: 4px 2px;
 			border-radius: var(--radius-m);
@@ -72,19 +91,19 @@
 
 		& .stack__status--bar {
 			width: 2px;
-			height: 10px;
+			height: 9px;
 			margin: 0 20px;
 			background: var(--bg-color);
 		}
 
 		& .stack__status--sequence-label {
-			padding: 1px 3px 2px;
+			padding: 2px 3px 3px;
 			text-align: center;
 			line-height: 1;
 		}
 
 		& .small-sequance-label {
-			font-size: 9px;
+			font-size: 8px;
 		}
 	}
 </style>

From b1b81a84db1ee310176a6fb78b436f6b700d6b21 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Mon, 28 Oct 2024 22:41:51 +0100
Subject: [PATCH 4/8] added sharable CSS variable for branch line margins

---
 apps/desktop/src/lib/branch/StackingSeriesHeader.svelte         | 2 +-
 apps/desktop/src/lib/branch/StackingStatusIcon.svelte           | 2 +-
 .../src/lib/commit/StackingUpstreamCommitsAccordion.svelte      | 2 +-
 apps/desktop/src/lib/stack/StackCurrentSeries.svelte            | 1 +
 packages/ui/src/lib/commitLinesStacking/Cell.svelte             | 2 +-
 5 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
index 6669400145..76e0475f33 100644
--- a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
+++ b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
@@ -311,7 +311,7 @@
 
 	.branch-action__line {
 		min-width: 2px;
-		margin: 0 20px;
+		margin: var(--lines-inner-margin);
 		background-color: var(--bg-color, var(--clr-border-3));
 	}
 </style>
diff --git a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
index 9dc3930c57..014cd15338 100644
--- a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
+++ b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
@@ -92,7 +92,7 @@
 		& .stack__status--bar {
 			width: 2px;
 			height: 9px;
-			margin: 0 20px;
+			margin: var(--lines-inner-margin);
 			background: var(--bg-color);
 		}
 
diff --git a/apps/desktop/src/lib/commit/StackingUpstreamCommitsAccordion.svelte b/apps/desktop/src/lib/commit/StackingUpstreamCommitsAccordion.svelte
index 84530e1305..da1a54500c 100644
--- a/apps/desktop/src/lib/commit/StackingUpstreamCommitsAccordion.svelte
+++ b/apps/desktop/src/lib/commit/StackingUpstreamCommitsAccordion.svelte
@@ -95,7 +95,7 @@
 		& .accordion-row__line {
 			position: relative;
 			width: 2px;
-			margin: 0 20px;
+			margin: var(--lines-inner-margin);
 			background-color: var(--clr-commit-upstream);
 			--dots-y-shift: -8px;
 
diff --git a/apps/desktop/src/lib/stack/StackCurrentSeries.svelte b/apps/desktop/src/lib/stack/StackCurrentSeries.svelte
index f6f3983f49..fa43af77ba 100644
--- a/apps/desktop/src/lib/stack/StackCurrentSeries.svelte
+++ b/apps/desktop/src/lib/stack/StackCurrentSeries.svelte
@@ -47,6 +47,7 @@
 
 <style>
 	.branch-group {
+		--lines-inner-margin: 0 20px;
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-m);
 		background: var(--clr-bg-1);
diff --git a/packages/ui/src/lib/commitLinesStacking/Cell.svelte b/packages/ui/src/lib/commitLinesStacking/Cell.svelte
index a94178cc9a..43baa8e0e8 100644
--- a/packages/ui/src/lib/commitLinesStacking/Cell.svelte
+++ b/packages/ui/src/lib/commitLinesStacking/Cell.svelte
@@ -22,6 +22,6 @@
 <style lang="postcss">
 	.commit-line {
 		width: 2px;
-		margin: 0 20px;
+		margin: var(--lines-inner-margin);
 	}
 </style>

From 541da7171ed312d0083e2d3794a5d43f3a22da44 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Mon, 28 Oct 2024 23:34:11 +0100
Subject: [PATCH 5/8] Update StackingStatusIcon.svelte

---
 .../src/lib/branch/StackingStatusIcon.svelte  | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
index 014cd15338..12bbbccf3c 100644
--- a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
+++ b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
@@ -39,7 +39,7 @@
 	}
 </script>
 
-<div class="stack__status gap">
+<div class="stack__status gap" class:small-sequance-label={seqenceAmount >= 10}>
 	<div
 		class="stack__status--bar"
 		style:--bg-color={lineTop ? color : 'var(--clr-transparent)'}
@@ -52,9 +52,8 @@
 	>
 		<div class="stack__status--icon" style:--bg-color={color} style:--icon-color={iconColor}>
 			{#if seqenceAmount > 1}
-				<span
-					class="text-9 text-bold stack__status--sequence-label"
-					class:small-sequance-label={seqenceAmount >= 10}>{sequanceId}/{seqenceAmount}</span
+				<span class="text-9 text-bold stack__status--sequence-label"
+					>{sequanceId}/{seqenceAmount}</span
 				>
 			{:else}
 				<Icon name={icon} />
@@ -80,9 +79,8 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			min-width: 20px;
+			min-width: 22px;
 			max-width: 24px;
-			/* height: 22px; */
 			padding: 4px 2px;
 			border-radius: var(--radius-m);
 			background-color: var(--bg-color);
@@ -102,8 +100,19 @@
 			line-height: 1;
 		}
 
-		& .small-sequance-label {
-			font-size: 8px;
+		/* MODIFIER */
+
+		&.small-sequance-label {
+			margin-right: 6px;
+
+			& .stack__status--icon {
+				margin-left: 4px;
+				max-width: none;
+			}
+
+			& .stack__status--sequence-label {
+				font-size: 9px;
+			}
 		}
 	}
 </style>

From 264842171a22da7a04a87577b99ffbbe68b96d4c Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Tue, 29 Oct 2024 00:36:50 +0100
Subject: [PATCH 6/8] styles tweak

---
 .../desktop/src/lib/branch/StackingStatusIcon.svelte | 12 +++++++-----
 apps/desktop/src/lib/stack/StackCurrentSeries.svelte |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
index 12bbbccf3c..b6e3186c6b 100644
--- a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
+++ b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
@@ -52,7 +52,7 @@
 	>
 		<div class="stack__status--icon" style:--bg-color={color} style:--icon-color={iconColor}>
 			{#if seqenceAmount > 1}
-				<span class="text-9 text-bold stack__status--sequence-label"
+				<span class="text-9 text-semibold stack__status--sequence-label"
 					>{sequanceId}/{seqenceAmount}</span
 				>
 			{:else}
@@ -79,9 +79,10 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			min-width: 22px;
+			margin-left: -2px;
+			min-width: 20px;
 			max-width: 24px;
-			padding: 4px 2px;
+			padding: 3px 2px;
 			border-radius: var(--radius-m);
 			background-color: var(--bg-color);
 			color: var(--icon-color, var(--clr-text-1));
@@ -103,15 +104,16 @@
 		/* MODIFIER */
 
 		&.small-sequance-label {
-			margin-right: 6px;
+			margin-right: 4px;
 
 			& .stack__status--icon {
 				margin-left: 4px;
 				max-width: none;
+				width: 30px;
 			}
 
 			& .stack__status--sequence-label {
-				font-size: 9px;
+				padding: 3px;
 			}
 		}
 	}
diff --git a/apps/desktop/src/lib/stack/StackCurrentSeries.svelte b/apps/desktop/src/lib/stack/StackCurrentSeries.svelte
index fa43af77ba..386f057812 100644
--- a/apps/desktop/src/lib/stack/StackCurrentSeries.svelte
+++ b/apps/desktop/src/lib/stack/StackCurrentSeries.svelte
@@ -47,7 +47,7 @@
 
 <style>
 	.branch-group {
-		--lines-inner-margin: 0 20px;
+		--lines-inner-margin: 0 22px 0 20px;
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-m);
 		background: var(--clr-bg-1);

From 70e098917811e8d42b39e88d5308b75c365b3e9e Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Tue, 29 Oct 2024 00:38:19 +0100
Subject: [PATCH 7/8] fix typos

---
 .../src/lib/branch/StackingSeriesHeader.svelte       |  6 +++---
 .../desktop/src/lib/branch/StackingStatusIcon.svelte | 12 ++++++------
 apps/desktop/src/lib/stack/StackSeries.svelte        |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
index 76e0475f33..570f4090dd 100644
--- a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
+++ b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
@@ -30,11 +30,11 @@
 	interface Props {
 		currentSeries: PatchSeries;
 		isTopSeries: boolean;
-		sequanceId: number;
+		sequenceId: number;
 		seqenceAmount: number;
 	}
 
-	const { currentSeries, isTopSeries, sequanceId, seqenceAmount }: Props = $props();
+	const { currentSeries, isTopSeries, sequenceId, seqenceAmount }: Props = $props();
 
 	let descriptionVisible = $state(false);
 
@@ -186,7 +186,7 @@
 			icon={branchType === 'integrated' ? 'tick-small' : 'remote-branch-small'}
 			iconColor="var(--clr-core-ntrl-100)"
 			color={lineColor}
-			{sequanceId}
+			{sequenceId}
 			{seqenceAmount}
 			lineBottom={currentSeries.patches.length > 0 || branch.series.length > 1}
 		/>
diff --git a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
index b6e3186c6b..89ade59d1f 100644
--- a/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
+++ b/apps/desktop/src/lib/branch/StackingStatusIcon.svelte
@@ -11,7 +11,7 @@
 		color?: string;
 		lineTop?: boolean;
 		lineBottom?: boolean;
-		sequanceId: number;
+		sequenceId: number;
 		seqenceAmount: number;
 		branchType: CommitStatus;
 	}
@@ -22,7 +22,7 @@
 		color = FALLBACK_COLOR,
 		lineTop = true,
 		lineBottom = true,
-		sequanceId,
+		sequenceId,
 		seqenceAmount,
 		branchType
 	}: Props = $props();
@@ -39,7 +39,7 @@
 	}
 </script>
 
-<div class="stack__status gap" class:small-sequance-label={seqenceAmount >= 10}>
+<div class="stack__status gap" class:small-sequence-label={seqenceAmount >= 10}>
 	<div
 		class="stack__status--bar"
 		style:--bg-color={lineTop ? color : 'var(--clr-transparent)'}
@@ -47,13 +47,13 @@
 
 	<Tooltip
 		text={seqenceAmount > 1
-			? `${branchNameType()} ${sequanceId} of ${seqenceAmount}`
+			? `${branchNameType()} ${sequenceId} of ${seqenceAmount}`
 			: branchNameType()}
 	>
 		<div class="stack__status--icon" style:--bg-color={color} style:--icon-color={iconColor}>
 			{#if seqenceAmount > 1}
 				<span class="text-9 text-semibold stack__status--sequence-label"
-					>{sequanceId}/{seqenceAmount}</span
+					>{sequenceId}/{seqenceAmount}</span
 				>
 			{:else}
 				<Icon name={icon} />
@@ -103,7 +103,7 @@
 
 		/* MODIFIER */
 
-		&.small-sequance-label {
+		&.small-sequence-label {
 			margin-right: 4px;
 
 			& .stack__status--icon {
diff --git a/apps/desktop/src/lib/stack/StackSeries.svelte b/apps/desktop/src/lib/stack/StackSeries.svelte
index e4af50d912..5f1249e087 100644
--- a/apps/desktop/src/lib/stack/StackSeries.svelte
+++ b/apps/desktop/src/lib/stack/StackSeries.svelte
@@ -33,7 +33,7 @@
 		<StackingSeriesHeader
 			{currentSeries}
 			{isTopSeries}
-			sequanceId={branch.series.length - idx}
+			sequenceId={branch.series.length - idx}
 			seqenceAmount={branch.series.length}
 		/>
 

From 2cd32884d3f5c821af000d9be4d2652f349bde3b Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Tue, 29 Oct 2024 02:06:42 +0100
Subject: [PATCH 8/8] remove unused code

---
 apps/desktop/src/lib/branch/StackingSeriesHeader.svelte | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
index 32a25bc8b9..c30fc2794a 100644
--- a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
+++ b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
@@ -263,11 +263,6 @@
 		</div>
 	{/if}
 
-	<div class="branch-action">
-		<div class="branch-action__line" style:--bg-color={lineColor}></div>
-		<div class="branch-action__body"></div>
-	</div>
-
 	{#if $pr}
 		<PrDetailsModal bind:this={prDetailsModal} type="display" pr={$pr} />
 	{:else}