Match Angular PageLayout: 24px tablet padding, single title wrapper

src/styles/_layout.scss

@@ -470,13 +470,10 @@ body {
     }
 }
 
-// Responsive layout (adapted from Angular adaptive styles)
-@media (max-width: $media-breakpoint-tablet) {
-    #root {
-        padding: 0 16px;
-    }
-}
-
+// Responsive layout (mirrors Angular's `_layout-adaptive.scss`):
+// `flights-root` stays at 24px horizontal padding on tablet; mobile
+// drops to 10px. React previously used 16px on tablet which left a
+// ~16px offset that polluted every visual-parity screenshot.
 @media (max-width: $media-breakpoint-mobile) {
     #root {
         padding: 0 10px;

src/ui/layout/PageLayout.scss

@@ -70,11 +70,10 @@
   &__header-right {
     margin-top: auto;
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
+    justify-content: space-between;
 
     @include screen.smTablet {
+      flex-direction: column;
       order: 1;
     }
   }
@@ -87,12 +86,6 @@
     }
   }
 
-  &__title-row {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
   &__title {
     width: calc(100% - 120px);
   }

src/ui/layout/PageLayout.tsx

@@ -43,13 +43,19 @@ export const PageLayout: FC<PageLayoutProps> = ({
           {headerLeft}
         </aside>
         <div className="page-layout__column-right page-layout__header-right">
-          {breadcrumbs && <Breadcrumbs items={breadcrumbs} />}
-          <div className="page-layout__title-row">
-            <div className="page-layout__title">
-              {title}
-            </div>
-            {/* FeedbackButton hidden: Angular has it behind FEEDBACK_BUTTON_AVAILABLE feature flag (off by default) */}
+          {/*
+            Angular stacks the breadcrumb trail and the <h1> inside a
+            single `__title` wrapper, then uses `__header-right`'s
+            `justify-content: space-between` to push the optional
+            feedback button to the far right. Mirror that structure so
+            the breadcrumb sits directly above the title rather than
+            drifting to the row start.
+          */}
+          <div className="page-layout__title">
+            {breadcrumbs && <Breadcrumbs items={breadcrumbs} />}
+            {title}
           </div>
+          {/* FeedbackButton hidden: Angular has it behind FEEDBACK_BUTTON_AVAILABLE feature flag (off by default) */}
         </div>
       </div>
       <div className="page-layout__row page-layout__content">