style: update padding and spacing in various components

The padding and spacing in various components have been updated to improve the visual layout and alignment. This includes changes to the commit box, text inputs, commit list, branch files, and other related elements. The padding values have been adjusted to ensure consistent spacing and improve overall readability and usability.

gitbutler-ui/src/lib/components/BranchFiles.svelte

@@ -69,15 +69,15 @@
 		}
 	}
 	.branch-files__header {
-		padding-top: var(--space-12);
+		padding-top: var(--space-14);
 		padding-bottom: var(--space-12);
-		padding-left: var(--space-20);
-		padding-right: var(--space-12);
+		padding-left: var(--space-14);
+		padding-right: var(--space-14);
 	}
 	.files-padding {
 		padding-top: 0;
 		padding-bottom: var(--space-12);
-		padding-left: var(--space-12);
-		padding-right: var(--space-12);
+		padding-left: var(--space-14);
+		padding-right: var(--space-14);
 	}
 </style>

gitbutler-ui/src/lib/components/BranchHeader.svelte

@@ -407,7 +407,7 @@
 		display: flex;
 		gap: var(--space-4);
 		background: var(--clr-theme-container-pale);
-		padding: var(--space-12);
+		padding: var(--space-14);
 		justify-content: space-between;
 		border-radius: 0 0 var(--radius-m) var(--radius-m);
 		user-select: none;
@@ -453,6 +453,7 @@
 	.header__remote-branch {
 		color: var(--clr-theme-scale-ntrl-50);
 		padding-left: var(--space-4);
+		padding-right: var(--space-2);
 		display: flex;
 		gap: var(--space-4);
 		text-overflow: ellipsis;

gitbutler-ui/src/lib/components/CommitCard.svelte

@@ -177,7 +177,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--space-10);
-		padding: var(--space-12);
+		padding: var(--space-14);
 	}
 
 	.is-commit-open {
@@ -264,7 +264,7 @@
 		display: flex;
 		justify-content: flex-end;
 		gap: var(--space-8);
-		padding: var(--space-12);
+		padding: var(--space-14);
 		border-top: 1px solid var(--clr-theme-container-outline-light);
 	}
 </style>

gitbutler-ui/src/lib/components/CommitDialog.svelte

@@ -135,7 +135,7 @@
 					on:focus={useAutoHeight}
 					on:change={() => currentCommitMessage.set(commitMessage)}
 					spellcheck={false}
-					class="text-input commit-box__textarea"
+					class="text-input text-base-body-13 commit-box__textarea"
 					rows="1"
 					disabled={isGeneratingCommigMessage}
 					placeholder="Your commit message here"
@@ -217,7 +217,7 @@
 	.commit-box {
 		display: flex;
 		flex-direction: column;
-		padding: var(--space-16);
+		padding: var(--space-14);
 		background: var(--clr-theme-container-light);
 		border-top: 1px solid var(--clr-theme-container-outline-light);
 		transition: background-color var(--transition-medium);

gitbutler-ui/src/lib/components/CommitList.svelte

@@ -91,7 +91,7 @@
 	.commit-list__content {
 		display: flex;
 		flex-direction: column;
-		padding: 0 var(--space-16) var(--space-20) var(--space-16);
+		padding: 0 var(--space-14) var(--space-20) var(--space-14);
 		gap: var(--space-8);
 	}
 	.upstream-message {

gitbutler-ui/src/lib/components/CommitListHeader.svelte

@@ -35,7 +35,7 @@
 	.header {
 		display: flex;
 		align-items: center;
-		padding: var(--space-16) var(--space-12) var(--space-16) var(--space-16);
+		padding: var(--space-16) var(--space-14) var(--space-16) var(--space-14);
 		justify-content: space-between;
 		gap: var(--space-8);
 

gitbutler-ui/src/lib/components/FileListItem.svelte

@@ -50,49 +50,46 @@
 	});
 </script>
 
-<div
-	on:click
-	on:keydown
-	on:dragstart={() => {
-		// Reset selection if the file being dragged is not in the selected list
-		if ($selectedFiles.length > 0 && !$selectedFiles.find((f) => f.id == file.id)) {
-			$selectedFiles = [];
-		}
-	}}
-	use:draggable={{
-		...draggableFile(branchId, file, selectedFiles),
-		disabled: readonly || isUnapplied,
-		selector: '.selected-draggable'
-	}}
-	role="button"
-	tabindex="0"
-	on:contextmenu={(e) =>
-		popupMenu.openByMouse(e, {
-			files: $selectedFiles.includes(file) ? $selectedFiles : [file]
-		})}
->
+<div class="list-item-wrapper">
+	{#if showCheckbox}
+		<Checkbox
+			small
+			{checked}
+			{indeterminate}
+			on:change={(e) => {
+				selectedOwnership.update((ownership) => {
+					if (e.detail) file.hunks.forEach((h) => ownership.addHunk(file.id, h.id));
+					if (!e.detail) file.hunks.forEach((h) => ownership.removeHunk(file.id, h.id));
+					return ownership;
+				});
+			}}
+		/>
+	{/if}
 	<div
 		class="file-list-item"
 		id={`file-${file.id}`}
 		class:selected-draggable={selected}
-		role="listitem"
-		on:contextmenu|preventDefault
+		on:click
+		on:keydown
+		on:dragstart={() => {
+			// Reset selection if the file being dragged is not in the selected list
+			if ($selectedFiles.length > 0 && !$selectedFiles.find((f) => f.id == file.id)) {
+				$selectedFiles = [];
+			}
+		}}
+		use:draggable={{
+			...draggableFile(branchId, file, selectedFiles),
+			disabled: readonly || isUnapplied,
+			selector: '.selected-draggable'
+		}}
+		role="button"
+		tabindex="0"
+		on:contextmenu={(e) =>
+			popupMenu.openByMouse(e, {
+				files: $selectedFiles.includes(file) ? $selectedFiles : [file]
+			})}
 	>
 		<div class="info-wrap">
-			{#if showCheckbox}
-				<Checkbox
-					small
-					{checked}
-					{indeterminate}
-					on:change={(e) => {
-						selectedOwnership.update((ownership) => {
-							if (e.detail) file.hunks.forEach((h) => ownership.addHunk(file.id, h.id));
-							if (!e.detail) file.hunks.forEach((h) => ownership.removeHunk(file.id, h.id));
-							return ownership;
-						});
-					}}
-				/>
-			{/if}
 			<div class="info">
 				<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" />
 				<span class="text-base-12 name">
@@ -108,7 +105,14 @@
 </div>
 
 <style lang="postcss">
+	.list-item-wrapper {
+		display: flex;
+		align-items: center;
+		gap: var(--space-8);
+	}
+
 	.file-list-item {
+		flex: 1;
 		display: flex;
 		align-items: center;
 		height: var(--space-28);