diff --git a/src/app.css b/src/app.css
index c0d683cb..d9ac3b55 100644
--- a/src/app.css
+++ b/src/app.css
@@ -127,10 +127,24 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   font-size: 1.2em;
   text-align: center;
 }
-.deck > header .header-grid h1:first-child {
+.deck > header .header-grid.header-grid-2 {
+  grid-template-columns: 1fr max-content;
+}
+.deck > header .header-grid-2 h1 {
   text-align: left;
   padding-left: 8px;
-  width: max-content;
+}
+.deck > header .header-grid h1:has(.ancestors-indicator) {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  max-width: fit-content;
+}
+.deck > header .header-grid h1:has(.ancestors-indicator) .hero-heading {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .deck h2 {
   font-size: 1.45em;
diff --git a/src/pages/status.css b/src/pages/status.css
index 75edf2f1..d40ed123 100644
--- a/src/pages/status.css
+++ b/src/pages/status.css
@@ -19,7 +19,6 @@
 .hero-heading {
   font-size: 16px;
   display: inline-block;
-  margin-bottom: 0.25em;
 }
 .hero-heading .icon {
   vertical-align: middle;
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 869b6995..e198befc 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -475,7 +475,7 @@ function StatusPage() {
               <Icon icon="chevron-left" size="xl" />
             </Link>
           </div> */}
-          <div class="header-grid">
+          <div class="header-grid header-grid-2">
             <h1>
               {!heroInView && heroStatus && uiState !== 'loading' ? (
                 <>