Change CSS px values to rem for better zoom

src/app.postcss

@@ -68,7 +68,7 @@ textarea {
 button.basic,
 button.primary,
 button.destructive {
-	line-height: 20px;
+	line-height: 1.25rem;
 }
 
 button.primary {
@@ -97,13 +97,13 @@ button {
 		w-fit
 		cursor-pointer
 		items-center
-		gap-[10px]
+		gap-0.5
 		whitespace-nowrap
 		rounded
 		py-2
 		text-base
 		font-medium
-		leading-[20px]
+		leading-5
 		underline
 		transition
 		duration-150
@@ -212,10 +212,6 @@ button:focus {
 }
 
 .filled {
-	border-top: 1px solid rgba(255, 255, 255, 0.2);
-	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-	border-left: 1px solid rgba(255, 255, 255, 0);
-	border-right: 1px solid rgba(255, 255, 255, 0);
 	text-shadow: 0px 2px #00000021;
 }
 
@@ -229,7 +225,7 @@ button:focus {
 }
 
 .small {
-	@apply h-[24px] py-[1px];
+	@apply h-6 py-[0.0625rem];
 }
 
 .full-width {
@@ -239,15 +235,15 @@ button:focus {
 input[type='checkbox'] {
 	appearance: none;
 	border: 0;
-	border-radius: 4px;
+	border-radius: 0.25rem;
 	display: inline-grid;
 	place-content: center;
 }
 
 input[type='checkbox']::before {
 	content: '';
-	width: 10px;
-	height: 8px;
+	width: 0.625rem;
+	height: 0.5rem;
 	transform: scale(0);
 	box-shadow: inset 1em 1em white;
 }
@@ -269,7 +265,7 @@ input[type='checkbox'] {
 }
 input[type='checkbox'].error {
 	background: #fff4f4;
-	border: 2px solid #d82c0d;
+	border: 0.125rem solid #d82c0d;
 }
 
 input[type='checkbox']:hover {
@@ -288,19 +284,19 @@ input[type='checkbox'].error:indeterminate {
 
 input[type='checkbox']:focus {
 	background: #ffffff;
-	border: 2px solid #58529f;
-	border-radius: 5px;
+	border: 0.125rem solid #58529f;
+	border-radius: 0.25rem;
 }
 input[type='checkbox']:checked:focus,
 input[type='checkbox']:indeterminate:focus {
-	border: 2px solid #458fff;
+	border: 0.125rem solid #458fff;
 	background: linear-gradient(180deg, #6b66aa 0%, #484383 100%);
-	border-radius: 5px;
+	border-radius: 0.25rem;
 }
 
 input[type='checkbox']:disabled {
 	background: #fafbfb;
-	border: 2px solid #d2d5d8;
+	border: 0.125rem solid #d2d5d8;
 }
 input[type='checkbox']:checked:disabled,
 input[type='checkbox']:indeterminate:disabled {
@@ -309,12 +305,12 @@ input[type='checkbox']:indeterminate:disabled {
 
 /* sizes */
 input[type='checkbox'] {
-	width: 16px;
-	height: 16px;
+	width: 1rem;
+	height: 1rem;
 }
 input[type='checkbox'].large {
-	width: 20px;
-	height: 20px;
+	width: 1.25rem;
+	height: 1.25rem;
 }
 
 /* drag & drop */

src/lib/icons/IconBranch.svelte

@@ -1,12 +1,7 @@
-<script lang="ts">
-	let className = '';
-	export { className as class };
-</script>
-
 <svg
-	class={className}
 	width="14"
 	height="16"
+	class="h-4 w-4"
 	viewBox="0 0 14 16"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"

src/lib/icons/IconMeatballMenu.svelte

@@ -1,6 +1,7 @@
 <svg
 	on:click
 	on:keydown
+	class="h-1 w-4"
 	width="16"
 	height="4"
 	viewBox="0 0 16 4"

src/routes/repo/[projectId]/BranchLane.svelte

@@ -155,7 +155,7 @@
 		</PopupMenuItem>
 
 		<div class="mx-3">
-			<div class="my-2 h-[1px] w-full  bg-light-300 dark:bg-dark-500" />
+			<div class="my-2 h-[0.0625rem] w-full  bg-light-300 dark:bg-dark-500" />
 		</div>
 
 		<PopupMenuItem on:click={() => branchController.createBranch({ order })}>