style: adjust pin layout and fix commit line width for consistency (#9663)

Author: PavelLaptev

apps/desktop/src/components/CommitGoesHere.svelte

@@ -61,7 +61,6 @@
 		display: flex;
 		align-items: center;
 		padding: 12px 0;
-		gap: 12px;
 		border-bottom: 1px solid var(--clr-border-2);
 		background-color: var(--clr-bg-1);
 
@@ -71,18 +70,18 @@
 		}
 	}
 	.pin {
+		display: flex;
 		position: relative;
-		width: 8px;
+		align-items: center;
+		justify-content: center;
+		width: 42px;
 		height: 8px;
-		margin-left: 16px;
 	}
 
 	.pin__circle {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
+		position: relative;
+		width: 8px;
+		height: 8px;
 		border-radius: 100%;
 		outline: 2px solid var(--clr-theme-pop-element);
 		background-color: var(--clr-bg-1);

apps/desktop/src/components/CommitLine.svelte

@@ -3,29 +3,23 @@
 	import { type CommitStatusType } from '$lib/commits/commit';
 
 	import { Tooltip } from '@gitbutler/ui';
-	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
 
 	interface Props {
 		commitStatus: CommitStatusType;
 		diverged: boolean;
 		tooltip?: string;
 		lastCommit?: boolean;
 		lastBranch?: boolean;
-		width?: number;
 	}
 
-	const { commitStatus, diverged, tooltip, lastCommit, lastBranch, width = 42 }: Props = $props();
+	const { commitStatus, diverged, tooltip, lastCommit, lastBranch }: Props = $props();
 
 	const color = $derived(getColorFromCommitState(commitStatus, diverged));
 
 	const rhombus = $derived(commitStatus === 'LocalAndRemote');
 </script>
 
-<div
-	class="commit-lines"
-	style:--commit-color={color}
-	style:--container-width="{pxToRem(width)}rem"
->
+<div class="commit-lines" style:--commit-color={color}>
 	<div class="top"></div>
 	{#if diverged}
 		<div class="local-shadow-commit-dot">
@@ -60,7 +54,7 @@
 		flex: 0 0 auto;
 		flex-direction: column;
 		align-items: center;
-		width: var(--container-width);
+		width: 42px;
 		gap: 3px;
 	}