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

@@ -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 {