From abd662005028e0d4a75a2eca1cc232cc03b347cf Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Thu, 18 Apr 2024 10:42:21 -0700
Subject: [PATCH] fix: Fix truncation on public shares

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 core/css/header.scss             | 17 +++++++++++++++++
 core/templates/layout.public.php | 24 ++++++++++++++----------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/core/css/header.scss b/core/css/header.scss
index a9acb90adbd25..30367c4dd70da 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -230,6 +230,17 @@
 	flex: 1 1 100%;
 }
 
+.header-info {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.header-title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .header-shared-by  {
 	color: var(--color-primary-element-text);
 	position: relative;
@@ -238,6 +249,12 @@
 	line-height: 11px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	text-align: end;
+	flex: 1 1 100%;
+
+	@media only screen and (min-width: variables.$breakpoint-mobile) {
+		margin-right: 20px;
+	}
 }
 
 /* Skip navigation links – show only on keyboard focus */
diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php
index 0ee81d69270b7..19ec4244b9f1a 100644
--- a/core/templates/layout.public.php
+++ b/core/templates/layout.public.php
@@ -48,17 +48,21 @@
 					<div class="logo logo-icon"></div>
 				<?php endif; ?>
 
-				<?php if (isset($template) && $template->getHeaderTitle() !== '') { ?>
-					<?php p($template->getHeaderTitle()); ?>
-				<?php } else { ?>
-					<?php	p($theme->getName()); ?>
-				<?php } ?>
-			</div>
-			<?php if (isset($template) && $template->getHeaderDetails() !== '') { ?>
-				<div class="header-shared-by">
-					<?php p($template->getHeaderDetails()); ?>
+				<div class="header-info">
+					<span class="header-title">
+						<?php if (isset($template) && $template->getHeaderTitle() !== '') { ?>
+							<?php p($template->getHeaderTitle()); ?>
+						<?php } else { ?>
+							<?php	p($theme->getName()); ?>
+						<?php } ?>
+					</span>
+					<?php if (isset($template) && $template->getHeaderDetails() !== '') { ?>
+						<span class="header-shared-by">
+							<?php p($template->getHeaderDetails()); ?>
+						</span>
+					<?php } ?>
 				</div>
-			<?php } ?>
+			</div>
 		</div>
 
 		<div class="header-right">