CSS fixes: branch (#4715)

* fix with on drag

* fix draggable handle for collapsed lines

* remove left border for the folded line when dragging

apps/desktop/src/lib/branch/BranchCard.svelte

@@ -102,6 +102,8 @@
 			onGenerateBranchName={generateBranchName}
 			{isLaneCollapsed}
 		/>
+
+		<div class="collapsed-lane-divider" data-remove-from-draggable></div>
 	</div>
 {:else}
 	<div class="resizer-wrapper" bind:this={scrollViewport}>
@@ -264,10 +266,19 @@
 
 	/* COLLAPSED LANE */
 	.collapsed-lane-container {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		padding: 12px;
 		height: 100%;
-		border-right: 1px solid var(--clr-border-2);
+	}
+
+	.collapsed-lane-divider {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 1px;
+		height: 100%;
+		background-color: var(--clr-border-2);
 	}
 </style>

apps/desktop/src/lib/branch/BranchHeader.svelte

@@ -129,7 +129,7 @@
 		role="button"
 	>
 		<div class="collapsed-lane__actions">
-			<div class="collapsed-lane__draggable" data-drag-handle>
+			<div class="draggable" data-drag-handle>
 				<Icon name="draggable" />
 			</div>
 			<Button style="ghost" outline icon="unfold-lane" help="Expand lane" onclick={expandLane} />
@@ -403,20 +403,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 2px;
-	}
-
-	.collapsed-lane__draggable {
-		cursor: grab;
-		transform: rotate(90deg);
-		margin-bottom: 4px;
-		opacity: 0.4;
-		transition: opacity var(--transition-fast);
-		color: var(--clr-scale-ntrl-0);
-
-		&:hover {
-			opacity: 1;
-		}
+		gap: 10px;
 	}
 
 	/*  */

apps/desktop/src/lib/components/Board.svelte

@@ -240,6 +240,7 @@
 
 	.branch {
 		height: 100%;
+		width: fit-content;
 	}
 
 	.draggable-branch {