Fix public layout header title & description

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 16 insertions, 2 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index 356ee93cf26..afda272ea78 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -64,6 +64,7 @@
 	box-sizing: border-box;
 	opacity: 1;
 	align-items: center;
+	display: flex;
 	flex-wrap: wrap;
 	overflow: hidden;
 
@@ -211,9 +212,9 @@
 	}
 
 	#header-left, .header-left {
-		flex: 0 0;
-		flex-grow: 1;
+		flex: 1 0;
 		white-space: nowrap;
+		min-width: 0;
 	}
 
 	#header-right, .header-right {
@@ -269,6 +270,7 @@
 	}
 }
 
+/* TODO: move into minimal css file for public shared template */
 /* only used for public share pages now as we have the app icons when logged in */
 .header-appname {
 	color: var(--color-primary-text);
@@ -279,6 +281,18 @@
 	padding-right: 5px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	// Take full width to push the header-shared-by bellow (if any)
+	flex: 1 1 100%;
+}
+
+.header-shared-by  {
+	color: var(--color-primary-text);
+	position: relative;
+	font-weight: 300;
+	font-size: 11px;
+	line-height: 11px;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 /* do not show menu toggle on public share links as there is no menu */