style(sidebar): Update padding and color for PR tags in SidebarEntry (#4811)

* style(sidebar): Update padding and color for PR tags in SidebarEntry

* Tooltip update

apps/desktop/src/lib/pr/PullRequestCard.svelte

@@ -231,7 +231,6 @@
 						!$pr.mergeable ||
 						['dirty', 'unknown', 'blocked', 'behind'].includes($pr.mergeableState)}
 					loading={isMerging}
-					tooltip="Merge pull request and refresh"
 					on:click={async (e) => {
 						if (!$pr) return;
 						isMerging = true;

packages/ui/src/lib/SidebarEntry.svelte

@@ -63,7 +63,7 @@
 	</h4>
 
 	<div class="row">
-		<div class="row-group authors-and-tags">
+		<div class="authors-and-tags">
 			{@render authorAvatars()}
 			<div class="branch-remotes">
 				<!-- NEED API -->
@@ -187,12 +187,6 @@
 		}
 	}
 
-	.authors-and-tags {
-		:global(& > *:first-child:empty) {
-			display: none;
-		}
-	}
-
 	/* ROW */
 
 	.row {
@@ -209,6 +203,12 @@
 		gap: 4px;
 	}
 
+	.authors-and-tags {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
 	/* TAG */
 
 	.branch-tag {
@@ -216,15 +216,21 @@
 		align-items: center;
 		justify-content: center;
 		gap: 2px;
-		padding: 0 4px;
+		padding: 4px;
 		height: 16px;
 		border-radius: var(--radius-s);
 	}
 
 	.tag-local,
 	.tag-remote {
-		background-color: var(--clr-theme-ntrl-soft-hover);
-		color: var(--clr-text-1);
+		border: 1px solid var(--clr-border-2);
+		/* background-color: color-mix(in srgb, var(--clr-scale-ntrl-60), transparent 70%);
+		color: var(--clr-text-1); */
+	}
+
+	.tag-pr,
+	.tag-draft-pr {
+		padding: 0 2px 0 4px;
 	}
 
 	.tag-pr {
@@ -234,7 +240,8 @@
 
 	.tag-draft-pr {
 		background-color: var(--clr-theme-ntrl-soft);
-		color: var(--clr-theme-ntrl-on-soft);
+		color: var(--clr-text-2);
+		border: 1px solid var(--clr-border-2);
 	}
 
 	.tag-applied {
@@ -280,7 +287,7 @@
 
 	.branch-remotes {
 		display: flex;
-		gap: 6px;
+		gap: 4px;
 	}
 
 	.branch-name {

packages/ui/src/lib/Tooltip.svelte

@@ -16,7 +16,7 @@
 		children: Snippet;
 	}
 
-	const { text, delay = 700, align = 'center', position = 'bottom', children }: Props = $props();
+	const { text, delay = 700, align, position, children }: Props = $props();
 
 	let targetEl: HTMLElement | undefined = $state();
 	let tooltipEl: HTMLElement | undefined = $state();
@@ -38,6 +38,26 @@
 		show = false;
 	}
 
+	function isNoSpaceOnRight() {
+		if (!targetEl || !tooltipEl) return false;
+
+		const tooltipRect = tooltipEl.getBoundingClientRect();
+		const targetChild = targetEl.children[0];
+		const targetRect = targetChild.getBoundingClientRect();
+
+		return targetRect.left + tooltipRect.width / 2 > window.innerWidth;
+	}
+
+	function isNoSpaceOnLeft() {
+		if (!targetEl || !tooltipEl) return false;
+
+		const tooltipRect = tooltipEl.getBoundingClientRect();
+		const targetChild = targetEl.children[0];
+		const targetRect = targetChild.getBoundingClientRect();
+
+		return targetRect.left - tooltipRect.width / 2 < 0;
+	}
+
 	function adjustPosition() {
 		if (!targetEl || !tooltipEl) return;
 
@@ -52,25 +72,59 @@
 		let transformOriginLeft = 'center';
 		const gap = 4;
 
-		if (position === 'bottom') {
-			top = targetRect.bottom + window.scrollY + gap;
+		function alignLeft() {
+			left = targetRect.left + window.scrollX;
+			transformOriginLeft = 'left';
+		}
 
-			transformOriginTop = 'top';
-		} else if (position === 'top') {
+		function alignRight() {
+			left = targetRect.right - tooltipRect.width + window.scrollX;
+			transformOriginLeft = 'right';
+		}
+
+		function alignCenter() {
+			left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2 + window.scrollX;
+			transformOriginLeft = 'center';
+		}
+
+		function positionTop() {
 			top = targetRect.top - tooltipRect.height + window.scrollY - gap;
-
 			transformOriginTop = 'bottom';
 		}
 
-		if (align === 'start') {
-			left = targetRect.left + window.scrollX;
-			transformOriginLeft = 'left';
-		} else if (align === 'end') {
-			left = targetRect.right - tooltipRect.width + window.scrollX;
-			transformOriginLeft = 'right';
-		} else if (align === 'center') {
-			left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2 + window.scrollX;
-			transformOriginLeft = 'center';
+		function positionBottom() {
+			top = targetRect.bottom + window.scrollY + gap;
+			transformOriginTop = 'top';
+		}
+
+		// Vertical position
+		if (position) {
+			if (position === 'bottom') {
+				positionBottom();
+			} else if (position === 'top') {
+				positionTop();
+			}
+		} else {
+			positionBottom();
+		}
+
+		// Auto check horizontal position
+		if (align) {
+			if (align === 'start') {
+				alignLeft();
+			} else if (align === 'end') {
+				alignRight();
+			} else if (align === 'center') {
+				alignCenter();
+			}
+		} else {
+			if (isNoSpaceOnLeft()) {
+				alignLeft();
+			} else if (isNoSpaceOnRight()) {
+				alignRight();
+			} else {
+				alignCenter();
+			}
 		}
 
 		tooltipEl.style.top = `${top}px`;

packages/ui/src/lib/avatar/Avatar.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
-	import Tooltip from '$lib/Tooltip.svelte';
+	import Tooltip, { type TooltipAlign, type TooltipPosition } from '$lib/Tooltip.svelte';
 	import { stringToColor } from '$lib/utils/stringToColor';
 
 	interface Props {
 		srcUrl: string;
 		tooltip: string;
+		tooltipAlign?: TooltipAlign;
+		tooltipPosition?: TooltipPosition;
 		size?: 'small' | 'medium';
 	}
 
 	let isLoaded = $state(false);
 
-	const { srcUrl, tooltip, size = 'small' }: Props = $props();
+	const { srcUrl, tooltip, tooltipAlign, tooltipPosition, size = 'small' }: Props = $props();
 </script>
 
-<Tooltip text={tooltip}>
+<Tooltip text={tooltip} align={tooltipAlign} position={tooltipPosition}>
 	<div class="image-wrapper {size}" style:background-color={stringToColor(tooltip)}>
 		<img
 			class="avatar"

packages/ui/src/stories/avatar/AvatarGrouping.stories.ts

@@ -10,11 +10,11 @@ type Story = StoryObj<typeof meta>;
 
 export const AvatarGroup: Story = {
 	args: {
-		maxAvatars: 3,
+		maxAvatars: 6,
 		avatars: [
 			{
 				srcUrl: 'https://avatars.githubusercontent.com/u/76307?s=80&v=4',
-				name: 'Davo'
+				name: 'Sebastian Markbåge'
 			},
 			{
 				srcUrl: 'https://gravatar.com/avatar/f43ef760d895a84ca7bb35ff6f4c6b7c',
@@ -23,6 +23,14 @@ export const AvatarGroup: Story = {
 			{
 				srcUrl: 'https://avatars.githubusercontent.com/u/869934?s=80&v=4',
 				name: 'Benjamin den Boer'
+			},
+			{
+				srcUrl: 'https://avatars.githubusercontent.com/u/14818017?s=64&v=4',
+				name: 'Paperstick'
+			},
+			{
+				srcUrl: 'https://avatars.githubusercontent.com/u/11708259?s=64&v=4',
+				name: 'Andy Hook'
 			}
 		]
 	}
@@ -34,7 +42,7 @@ export const AvatarGroupMany: Story = {
 		avatars: [
 			{
 				srcUrl: 'https://avatars.githubusercontent.com/u/76307?s=80&v=4',
-				name: 'Davo'
+				name: 'Sebastian Markbåge'
 			},
 			{
 				srcUrl: 'https://gravatar.com/avatar/f43ef760d895a84ca7bb35ff6f4c6b7c',

packages/ui/src/stories/sidebarEntry/DemoSidebarEntry.svelte

@@ -29,7 +29,7 @@
 			avatars={[
 				{
 					srcUrl: 'https://avatars.githubusercontent.com/u/76307?s=80&v=4',
-					name: 'Davo'
+					name: 'Sebastian Markbåge'
 				},
 				{
 					srcUrl: 'https://gravatar.com/avatar/f43ef760d895a84ca7bb35ff6f4c6b7c',

packages/ui/src/stories/tooltip/DemoTooltip.svelte

@@ -6,7 +6,7 @@
 
 <div class="wrapper">
 	<p class="text-13 text">
-		hello world! Here is a <Tooltip text={props.text}>
+		hello world! Here is a <Tooltip text={props.text} align={props.align} position={props.position}>
 			<span class="tooltip-text">tooltip</span>
 		</Tooltip> for you.
 	</p>