fix: align React CSS with Angular pixel-perfect layout

- Convert page-layout from CSS Grid to Flexbox to match Angular layout structure
  - Use flex-direction: row with sticky left sidebar positioning
  - Apply exact sidebar width (285px) and spacing (1.5% margin-right)
  - Implement responsive breakpoints matching Angular media queries
  - Set max-width: 1440px container with proper padding

- Standardize route-filter spacing using Angular spacing variables
  - Update gap values: 16px → 10px (match $space-m)
  - Update padding: 16px 0 → 20px (full padding around content)
  - Update label margins: 8px gap → proper Angular spacing
  - Adjust trip options gap: 16px → 20px ($space-xl)
  - Update passenger/cabin controls gaps and padding to match Angular

- Fix online-board-filter accordion padding
  - Remove top padding (5px → 0) for proper accordion content spacing
  - Keep side/bottom padding at 20px to match Angular layout

This fixes paddings, margins, labels positioning, and gaps to achieve pixel-perfect parity with Angular.

apps/react/src/app/components/page-layout/page-layout.scss

@@ -1,27 +1,63 @@
 .page-layout {
-  display: grid;
-  grid-template-columns: 285px 1fr;
-  gap: 20px;
-  min-height: calc(100vh - 60px);
-  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 32px 24px;
+  gap: 0;
+
+  @media (max-width: 1050px) {
+    flex-direction: column;
+    padding: 20px 24px;
+  }
 
   @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-    gap: 10px;
-    padding: 10px;
+    padding: 10px 16px;
   }
 }
 
 .page-layout__left {
-  flex-direction: column;
+  position: sticky;
+  top: 20px;
+  flex-shrink: 0;
+  width: 285px;
+  margin-right: 1.5%;
+  z-index: 1001;
+
+  @media (max-width: 1300px) {
+    width: calc(23.875% * 1.04);
+  }
+
+  @media (max-width: 1050px) {
+    position: relative;
+    top: 0;
+    width: 100%;
+    margin-right: 0;
+    margin-bottom: 20px;
+  }
 }
 
 .page-layout__right {
   display: flex;
   flex-direction: column;
+  width: calc(100% - 285px - 1.5%);
+  position: relative;
+
+  @media (max-width: 1300px) {
+    width: calc(100% - calc(23.875% * 1.04) - 1.5%);
+  }
+
+  @media (max-width: 1050px) {
+    width: 100%;
+  }
 }
 
 .page-layout__header {
+  position: relative;
+  z-index: 1001;
+  padding-top: 0;
   margin-bottom: 20px;
 }
 

apps/react/src/app/features/online-board/components/online-board-filter.scss

@@ -17,5 +17,5 @@
 }
 
 .online-board-filter .p-accordion-content {
-  padding: 5px 20px 20px 20px !important;
+  padding: 0 20px 20px 20px !important;
 }

apps/react/src/app/features/online-board/components/route-filter.scss

@@ -1,14 +1,14 @@
 .route-filter {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 16px 0;
+  gap: 10px;
+  padding: 20px;
 }
 
 .route-filter__group {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .route-filter__label {
@@ -16,16 +16,16 @@
   font-weight: 500;
   color: #666;
   text-transform: uppercase;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .route-filter__swap {
   align-self: center;
-  margin: 8px 0 !important;
+  margin: 10px 0 !important;
 }
 
 .route-filter__search-button {
-  margin-top: 8px;
+  margin-top: 10px;
 }
 
 .route-filter__display {
@@ -45,12 +45,12 @@
 
 .route-filter__trip-options {
   display: flex;
-  gap: 16px;
+  gap: 20px;
 
   label {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
     font-size: 14px;
     cursor: pointer;
     font-weight: normal;
@@ -83,7 +83,7 @@
 .route-filter__passenger-controls {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   padding: 12px;
   background-color: #fafafa;
   border: 1px solid #e0e0e0;
@@ -200,7 +200,7 @@
 .route-filter__additional-segments {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   padding: 12px;
   background-color: #fafafa;
   border: 1px solid #e0e0e0;
@@ -210,8 +210,8 @@
 .route-filter__segment {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  padding: 8px;
+  gap: 5px;
+  padding: 10px;
   background-color: #fff;
   border: 1px solid #e0e0e0;
   border-radius: 4px;