diff --git a/core/css/header.scss b/core/css/header.scss
index b2307fce215..5d51b1b711f 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -219,6 +219,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;
diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php
index 2c55240598c..f880e87b118 100644
--- a/core/templates/layout.public.php
+++ b/core/templates/layout.public.php
@@ -39,18 +39,22 @@ p($theme->getTitle());
 	<header id="header">
 		<div class="header-left">
 			<div class="logo logo-icon svg"></div>
-			<span id="nextcloud" class="header-appname">
-				<?php if (isset($template) && $template->getHeaderTitle() !== '') { ?>
-					<?php p($template->getHeaderTitle()); ?>
-				<?php } else { ?>
-					<?php	p($theme->getName()); ?>
-				<?php } ?>
-			</span>
-			<?php if (isset($template) && $template->getHeaderDetails() !== '') { ?>
-				<div class="header-shared-by">
-					<?php p($template->getHeaderDetails()); ?>
+			<div id="nextcloud" class="header-appname">
+				<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">