From d7a0d715b772ed46d7e2724745e33d59c5dd3910 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Wed, 22 Apr 2026 11:44:55 +0300
Subject: [PATCH] Stack breadcrumbs above the page H1 on all layout pages

Angular's page-layout template renders the breadcrumb trail and the
page title as separate rows (page-layout.component.html:7-8). React
wrapped both in a single block div, so the inline-flex breadcrumb pill
sat next to the <h1> instead of above it. Flip the wrapper to
`display: flex; flex-direction: column; align-items: flex-start` so the
pill sits on its own row above the heading, keeping its content-sized
width.
---
 src/ui/layout/PageLayout.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/ui/layout/PageLayout.scss b/src/ui/layout/PageLayout.scss
index d0aadbfe..8a5225f4 100644
--- a/src/ui/layout/PageLayout.scss
+++ b/src/ui/layout/PageLayout.scss
@@ -89,6 +89,13 @@
 
   &__title {
     width: calc(100% - 120px);
+    // Stack the breadcrumbs pill above the <h1> — Angular renders them
+    // in separate rows (page-layout.component.html:7-8). Without this,
+    // the inline-flex pill + block heading end up side-by-side because
+    // the parent is a plain block div.
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
   }
 
   &__title--fullwidth {