From b3664d6ea346deb0c58d286adbcc8988449e372f Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 11 Jan 2022 10:46:20 -0500
Subject: [PATCH] Fix project name overflow (#10977)

* Add ability to dynamically set placement

* Add ability to set overflow tooltip placement

* Fetch current user name/email

* Add proper overflow handling of project name
---
 app/src/components/v-text-overflow.vue            |  7 ++++++-
 app/src/directives/tooltip/tooltip.ts             | 15 ++++++++++++---
 app/src/stores/user.ts                            |  3 +++
 .../components/project-info/project-info.vue      |  9 ++++-----
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/app/src/components/v-text-overflow.vue b/app/src/components/v-text-overflow.vue
index 1627281090..9ef01499b2 100644
--- a/app/src/components/v-text-overflow.vue
+++ b/app/src/components/v-text-overflow.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="el" v-tooltip="hasEllipsis && text" class="v-text-overflow">
+	<div ref="el" v-tooltip:[placement]="hasEllipsis && text" class="v-text-overflow">
 		<v-highlight v-if="highlight" :query="highlight" :text="text" />
 		<template v-else>{{ text }}</template>
 	</div>
@@ -19,6 +19,11 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		placement: {
+			type: String,
+			default: 'top',
+			validator: (val: string) => ['top', 'bottom', 'left', 'right', 'start', 'end'].includes(val),
+		},
 	},
 	setup() {
 		const el = ref<HTMLElement>();
diff --git a/app/src/directives/tooltip/tooltip.ts b/app/src/directives/tooltip/tooltip.ts
index 91f0f0ae93..7eefade055 100644
--- a/app/src/directives/tooltip/tooltip.ts
+++ b/app/src/directives/tooltip/tooltip.ts
@@ -78,6 +78,15 @@ export function updateTooltip(element: HTMLElement, binding: DirectiveBinding, t
 	tooltip.innerText = binding.value;
 	tooltip.classList.remove('top', 'bottom', 'left', 'right', 'start', 'end');
 
+	let placement = binding.arg ?? 'top';
+
+	if ('top' in binding.modifiers) placement = 'top';
+	if ('right' in binding.modifiers) placement = 'right';
+	if ('bottom' in binding.modifiers) placement = 'bottom';
+	if ('left' in binding.modifiers) placement = 'left';
+	if ('start' in binding.modifiers) placement = 'start';
+	if ('end' in binding.modifiers) placement = 'end';
+
 	if (binding.modifiers.inverted) {
 		tooltip.classList.add('inverted');
 	} else {
@@ -88,7 +97,7 @@ export function updateTooltip(element: HTMLElement, binding: DirectiveBinding, t
 		tooltip.classList.add('monospace');
 	}
 
-	if (binding.modifiers.bottom) {
+	if (placement === 'bottom') {
 		if (binding.modifiers.start) {
 			left += arrowAlign;
 			transformPos = 100;
@@ -105,7 +114,7 @@ export function updateTooltip(element: HTMLElement, binding: DirectiveBinding, t
 		top += bounds.height + offset;
 		tooltip.style.transform = `translate(calc(${left}px - ${transformPos}%), ${top}px)`;
 		tooltip.classList.add('bottom');
-	} else if (binding.modifiers.left) {
+	} else if (placement === 'left') {
 		if (binding.modifiers.start) {
 			top += arrowAlign;
 			transformPos = 100;
@@ -122,7 +131,7 @@ export function updateTooltip(element: HTMLElement, binding: DirectiveBinding, t
 		left -= offset;
 		tooltip.style.transform = `translate(calc(${left}px - 100%), calc(${top}px - ${transformPos}%))`;
 		tooltip.classList.add('left');
-	} else if (binding.modifiers.right) {
+	} else if (placement === 'right') {
 		if (binding.modifiers.start) {
 			top += arrowAlign;
 			transformPos = 100;
diff --git a/app/src/stores/user.ts b/app/src/stores/user.ts
index 44afe95c95..2c3c11cbe1 100644
--- a/app/src/stores/user.ts
+++ b/app/src/stores/user.ts
@@ -37,6 +37,9 @@ export const useUserStore = defineStore({
 				const fields = [
 					'id',
 					'language',
+					'first_name',
+					'last_name',
+					'email',
 					'last_page',
 					'theme',
 					'avatar.id',
diff --git a/app/src/views/private/components/project-info/project-info.vue b/app/src/views/private/components/project-info/project-info.vue
index 312f3f4420..22baad0f45 100644
--- a/app/src/views/private/components/project-info/project-info.vue
+++ b/app/src/views/private/components/project-info/project-info.vue
@@ -2,8 +2,8 @@
 	<div class="project-info">
 		<latency-indicator />
 		<div class="name-container">
-			<span class="name">{{ name }}</span>
-			<span class="descriptor">{{ descriptor }}</span>
+			<v-text-overflow placement="right" class="name" :text="name" />
+			<v-text-overflow placement="right" class="descriptor" :text="descriptor" />
 		</div>
 	</div>
 </template>
@@ -33,17 +33,16 @@ export default defineComponent({
 	align-items: center;
 	width: 100%;
 	height: 60px;
-	padding: 0 20px;
+	padding-left: 20px;
 	color: var(--foreground-normal-alt);
 	text-align: left;
 	background-color: var(--background-normal-alt);
 
 	.name-container {
 		flex-grow: 1;
+		width: 100px;
 		margin-left: 12px;
 		line-height: 1.3;
-		white-space: nowrap;
-		text-overflow: ellipsis;
 	}
 
 	.name {