fix(ui): normalize button sizing and update icons

Author: PavelLaptev

apps/desktop/src/components/views/AppSidebar.svelte

@@ -398,6 +398,7 @@
 	:global(.sidebar .btn-square) {
 		aspect-ratio: 1 / 1;
 		height: unset;
+		padding: 0;
 		border-radius: var(--radius-ml);
 		/* codegen icon */
 		--clr-codegen-star: currentColor;

packages/ui/src/lib/components/Button.svelte

@@ -129,6 +129,7 @@
 	]);
 
 	const displayHotkey = $derived(hotkey ? formatHotkeyForPlatform(hotkey) : undefined);
+	const iconSize = $derived(size === "tag" ? 13 : 16);
 	let tooltipInstance = $state<Tooltip>();
 
 	function onmousedown(e: MouseEvent) {
@@ -196,13 +197,13 @@
 		{#if icon || loading || isDropdown}
 			<div class={["btn-icon", iconClass]}>
 				{#if loading}
-					<Icon name="spinner" />
+					<Icon name="spinner" size={iconSize} />
 				{:else if isDropdown}
 					<div class="btn-dropdown-chevron" class:open={dropdownOpen}>
-						<Icon name="chevron-down" />
+						<Icon name="chevron-down" size={iconSize} />
 					</div>
 				{:else if icon}
-					<Icon name={icon} />
+					<Icon name={icon} size={iconSize} />
 				{/if}
 			</div>
 		{/if}
@@ -237,9 +238,31 @@
 			max-width var(--transition-medium);
 		user-select: none;
 
+		/* ---- Sizes ---- */
+		&.tag-size {
+			--btn-size: var(--size-tag);
+			--btn-padding: 2px 8px;
+			--btn-gap: 2px;
+		}
+
+		&.button-size {
+			--btn-size: var(--size-button);
+			--btn-padding: 4px 10px;
+			--btn-gap: 4px;
+		}
+
+		&[class*="-size"] {
+			height: var(--btn-size);
+			padding: var(--btn-padding);
+			gap: var(--btn-gap);
+		}
+
+		&.fixed-width[class*="-size"] {
+			width: var(--btn-size);
+		}
+
 		/* ---- Child elements ---- */
 		.btn-label {
-			padding: 0 3px;
 			overflow: hidden;
 			white-space: nowrap;
 			pointer-events: none;
@@ -382,29 +405,6 @@
 			outline-offset: -2px;
 		}
 
-		/* ---- Sizes ---- */
-		&.tag-size {
-			--btn-size: var(--size-tag);
-			--btn-padding: 2px 4px;
-			--btn-gap: 0;
-		}
-
-		&.button-size {
-			--btn-size: var(--size-button);
-			--btn-padding: 4px 6px;
-			--btn-gap: 2px;
-		}
-
-		&[class*="-size"] {
-			height: var(--btn-size);
-			padding: var(--btn-padding);
-			gap: var(--btn-gap);
-		}
-
-		&.fixed-width[class*="-size"] {
-			width: var(--btn-size);
-		}
-
 		/* ---- Dropdown split-button ---- */
 		&.is-dropdown:first-of-type {
 			flex: 1;