UI updates (#7320)

* fix: chrome frame padding

* add tooltips to the sidebar

* change dotted grid background size

Author: PavelLaptev

apps/desktop/src/components/Chrome.svelte

@@ -35,7 +35,7 @@
 	.chrome-content {
 		display: flex;
 		flex-grow: 1;
-		padding: 0 16px 16px 0;
+		padding: 0 14px 14px 0;
 		align-items: self-start;
 		user-select: none;
 		overflow: hidden;

apps/desktop/src/components/ChromeSidebar.svelte

@@ -42,6 +42,7 @@
 				onclick={() => goto(routes.workspacePath(project.id))}
 				width={34}
 				class={['btn-square', routes.isWorkspacePath && 'btn-active']}
+				tooltip="Workspace"
 			>
 				<svg viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path
@@ -67,6 +68,7 @@
 				onclick={() => goto(routes.branchesPath(project.id))}
 				width={34}
 				class={['btn-square', routes.isBranchesPath && 'btn-active']}
+				tooltip="Branches"
 			>
 				<svg viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path d="M5 3L11 3" stroke-width="1.5" stroke="var(--clr-branches)" />
@@ -117,6 +119,7 @@
 				onclick={() => goto(routes.targetPath(project.id))}
 				width={34}
 				class={['btn-square', routes.isTargetPath && 'btn-active']}
+				tooltip="Target"
 			>
 				<svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path
@@ -144,6 +147,7 @@
 				onclick={() => goto(routes.historyPath(project.id))}
 				width={34}
 				class={['btn-square', routes.isHistoryPath && 'btn-active']}
+				tooltip="History"
 			>
 				<svg
 					viewBox="0 0 18 18"
@@ -176,6 +180,9 @@
 					onclick={() => goto(routes.projectSettingsPath(project.id))}
 					width={34}
 					class={['btn-square', routes.isProjectSettingsPath && 'btn-active']}
+					tooltipPosition="top"
+					tooltipAlign="start"
+					tooltip="Project settings"
 				/>
 			</div>
 
@@ -201,7 +208,6 @@
 							<Icon name="profile" />
 						{/if}
 					</div>
-					<!-- TODO: Replace with the select-chevron icon -->
 					<div class="user-button__select-icon">
 						<Icon name="select-chevron" />
 					</div>

apps/desktop/src/components/v3/StackDetails.svelte

@@ -96,8 +96,11 @@
 
 		background-color: transparent;
 		opacity: 1;
-		background-image: radial-gradient(var(--clr-border-2) 0.9px, #ffffff00 0.9px);
-		background-size: 12px 12px;
+		background-image: radial-gradient(
+			oklch(from var(--clr-scale-ntrl-50) l c h / 0.5) 0.6px,
+			#ffffff00 0.6px
+		);
+		background-size: 6px 6px;
 		border-right: 1px solid var(--clr-border-2);
 	}