From eb5ef8212df2f4cdf732240e6d9bf212f851a338 Mon Sep 17 00:00:00 2001
From: Yannick Mol <yannick@molmediasolutions.nl>
Date: Tue, 16 Feb 2021 23:10:57 +0100
Subject: [PATCH] Make headline visible if title is short

Fixes #4101
---
 .../private/components/header-bar/header-bar.vue     | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/src/views/private/components/header-bar/header-bar.vue b/app/src/views/private/components/header-bar/header-bar.vue
index 0bcc5bd450..04da83ee36 100644
--- a/app/src/views/private/components/header-bar/header-bar.vue
+++ b/app/src/views/private/components/header-bar/header-bar.vue
@@ -9,7 +9,7 @@
 		</div>
 
 		<div class="title-container" :class="{ full: !$scopedSlots['title-outer:append'] }">
-			<div class="headline">
+			<div class="headline" v-if="$scopedSlots['headline']">
 				<slot name="headline" />
 			</div>
 
@@ -116,8 +116,7 @@ export default defineComponent({
 
 	.title-container {
 		position: relative;
-		display: flex;
-		align-items: center;
+		display: grid;
 		max-width: calc(100% - 12px - 44px - 120px - 12px - 8px);
 		height: 100%;
 		margin-left: 16px;
@@ -138,9 +137,12 @@ export default defineComponent({
 		}
 
 		.headline {
-			position: absolute;
+			position: relative;
 			top: 2px;
-			left: 0;
+			display: flex;
+			align-items: center;
+			margin-bottom: -20px;
+			overflow: hidden;
 			color: var(--foreground-subdued);
 			white-space: nowrap;
 			opacity: 1;