Refactor: Remove vertical orientation as a prop (#3717)

app/src/lib/components/ActiveBranchStatus.svelte

@@ -20,8 +20,7 @@
 			icon="virtual-branch-small"
 			style="neutral"
 			help="These changes are stashed away from your working directory."
-			reversedDirection
+			reversedDirection>unapplied</Tag
-			verticalOrientation={isLaneCollapsed}>unapplied</Tag
 		>
 	{:else if hasIntegratedCommits}
 		<Tag
@@ -29,16 +28,14 @@
 			style="success"
 			kind="solid"
 			help="These changes have been integrated upstream, update your workspace to make this lane disappear."
-			reversedDirection
+			reversedDirection>Integrated</Tag
-			verticalOrientation={isLaneCollapsed}>Integrated</Tag
 		>
 	{:else}
 		<Tag
 			icon="virtual-branch-small"
 			style="neutral"
 			help="These changes are in your working directory."
-			reversedDirection
+			reversedDirection>Virtual</Tag
-			verticalOrientation={isLaneCollapsed}>Virtual</Tag
 		>
 	{/if}
 	{#if !isUnapplied && !isLaneCollapsed}
@@ -47,7 +44,6 @@
 			shrinkable
 			disabled
 			help="Branch name that will be used when pushing. You can change it from the lane menu."
-			verticalOrientation={isLaneCollapsed}
 		>
 			{$baseBranch.actualPushRemoteName()}/{branchName}</Tag
 		>
@@ -58,7 +54,6 @@
 		kind="solid"
 		icon="remote-branch-small"
 		help="At least some of your changes have been pushed"
-		verticalOrientation={isLaneCollapsed}
 		reversedDirection>Remote</Tag
 	>
 	<Tag
@@ -67,7 +62,6 @@
 		kind="solid"
 		clickable
 		shrinkable
-		verticalOrientation={isLaneCollapsed}
 		on:click={(e) => {
 			const url = $baseBranch?.branchUrl($branch.upstream?.name);
 			if (url) openExternalUrl(url);

app/src/lib/components/BranchCard.svelte

@@ -144,7 +144,7 @@
 </script>
 
 {#if $isLaneCollapsed}
-	<div class="collapsed-lane-wrapper">
+	<div class="collapsed-lane-container">
 		<BranchHeader
 			{isUnapplied}
 			uncommittedChanges={branch.files.length}
@@ -184,7 +184,7 @@
 							}
 						}}
 					/>
-					<PullRequestCard isLaneCollapsed={$isLaneCollapsed} />
+					<PullRequestCard />
 					<!-- DROPZONES -->
 					<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
 					<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
@@ -419,7 +419,7 @@
 	}
 
 	/* COLLAPSED LANE */
-	.collapsed-lane-wrapper {
+	.collapsed-lane-container {
 		display: flex;
 		flex-direction: column;
 		padding: var(--size-12);

app/src/lib/components/BranchHeader.svelte

@@ -47,6 +47,8 @@
 	}
 
 	$: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated);
+
+	let headerInfoHeight = 0;
 </script>
 
 {#if $isLaneCollapsed}
@@ -69,18 +71,18 @@
 			/>
 		</div>
 
-		<div class="collapsed-lane__info">
+		<div class="collapsed-lane__info-wrap" bind:clientHeight={headerInfoHeight}>
+			<div class="collapsed-lane__info" style="width: {headerInfoHeight}px">
 				<div class="collapsed-lane__label-wrap">
+					<h3 class="collapsed-lane__label text-base-13 text-bold">
+						{branch.name}
+					</h3>
 					{#if uncommittedChanges > 0}
-					<Tag style="warning" kind="soft" verticalOrientation help="Uncommitted changes">
+						<Tag style="warning" kind="soft" help="Uncommitted changes">
 							{uncommittedChanges}
 							{uncommittedChanges == 1 ? 'change' : 'changes'}
 						</Tag>
 					{/if}
-
-				<h3 class="collapsed-lane__label text-base-13 text-bold">
-					{branch.name}
-				</h3>
 				</div>
 
 				<div class="collapsed-lane__info__details">
@@ -92,11 +94,12 @@
 						isLaneCollapsed={$isLaneCollapsed}
 					/>
 					{#if branch.selectedForChanges}
-					<Tag style="pop" kind="solid" icon="target" verticalOrientation>Default branch</Tag>
+						<Tag style="pop" kind="solid" icon="target">Default branch</Tag>
 					{/if}
 				</div>
 			</div>
 		</div>
+	</div>
 {:else}
 	<div class="header__wrapper">
 		<div class="header card">
@@ -332,6 +335,8 @@
 		user-select: none;
 		align-items: center;
 		height: 100%;
+		width: var(--size-48);
+		overflow: hidden;
 		gap: var(--size-8);
 		padding: var(--size-8) var(--size-8) var(--size-20);
 
@@ -360,18 +365,23 @@
 		}
 	}
 
-	.collapsed-lane__info {
+	/*  */
-		flex: 1;
-		display: flex;
-		flex-direction: row-reverse;
-		align-items: center;
-		justify-content: space-between;
-		height: 100%;
 
-		writing-mode: vertical-rl;
+	.collapsed-lane__info-wrap {
-		gap: var(--size-8);
+		display: flex;
+		height: 100%;
 	}
 
+	.collapsed-lane__info {
+		display: flex;
+		justify-content: space-between;
+		gap: var(--size-8);
+		transform: rotate(-90deg);
+		direction: ltr;
+	}
+
+	/*  */
+
 	.collapsed-lane__info__details {
 		display: flex;
 		flex-direction: row-reverse;
@@ -388,7 +398,6 @@
 
 	.collapsed-lane__label {
 		color: var(--clr-scale-ntrl-0);
-		transform: rotate(180deg);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;

app/src/lib/components/PullRequestCard.svelte

@@ -20,8 +20,6 @@
 	import type iconsJson from '../icons/icons.json';
 	import type { Readable } from 'svelte/store';
 
-	export let isLaneCollapsed: boolean;
-
 	type StatusInfo = {
 		text: string;
 		icon: keyof typeof iconsJson | undefined;
@@ -266,7 +264,6 @@
 				icon={prStatusInfo.icon}
 				style={prStatusInfo.style}
 				kind={prStatusInfo.text !== 'Open' && prStatusInfo.text !== 'Status' ? 'solid' : 'soft'}
-				verticalOrientation={isLaneCollapsed}
 			>
 				{prStatusInfo.text}
 			</Tag>
@@ -275,7 +272,6 @@
 					icon={checksTagInfo.icon}
 					style={checksTagInfo.style}
 					kind={checksTagInfo.icon == 'success-small' ? 'solid' : 'soft'}
-					verticalOrientation={isLaneCollapsed}
 				>
 					{checksTagInfo.text}
 				</Tag>
@@ -286,7 +282,6 @@
 				kind="solid"
 				clickable
 				shrinkable
-				verticalOrientation={isLaneCollapsed}
 				on:click={(e) => {
 					const url = pr?.htmlUrl;
 					if (url) openExternalUrl(url);

app/src/lib/components/Tag.svelte

@@ -11,7 +11,6 @@
 	export let loading = false;
 	// Layout props
 	export let shrinkable = false;
-	export let verticalOrientation = false;
 	export let icon: keyof typeof iconsJson | undefined = undefined;
 	export let reversedDirection = false;
 	// Style props
@@ -24,7 +23,6 @@
 	class:disabled
 	class:shrinkable
 	class:reversedDirection
-	class:verticalOrientation
 	class:not-button={!clickable}
 	role={clickable ? 'button' : undefined}
 	use:tooltip={help}
@@ -32,13 +30,13 @@
 	on:mousedown
 	on:contextmenu
 >
-	<span class="label" class:verticalLabel={verticalOrientation}>
+	<span class="label">
 		<slot />
 	</span>
 	{#if loading}
 		<Icon name="spinner" />
 	{:else if icon}
-		<div class="icon" class:verticalIcon={verticalOrientation}>
+		<div class="icon">
 			<Icon name={icon} spinnerRadius={3.5} />
 		</div>
 	{/if}
@@ -237,20 +235,4 @@
 			text-overflow: ellipsis;
 		}
 	}
-
-	.verticalOrientation {
-		writing-mode: vertical-rl;
-		height: max-content;
-		width: var(--size-tag);
-		padding: var(--size-4) var(--size-2);
-		transform: rotate(180deg);
-	}
-
-	.verticalIcon {
-		transform: rotate(90deg);
-	}
-
-	.verticalLabel {
-		padding: var(--size-2) 0;
-	}
 </style>