From 35777454779f64e7fd0d8bab8cd02ab00d6bf02b Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 06:40:33 +0300
Subject: [PATCH] Style Breadcrumbs as Angular's translucent pill
 (dark-blue-opacity bg, 3/10 padding)

---
 src/ui/layout/Breadcrumbs.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/ui/layout/Breadcrumbs.scss b/src/ui/layout/Breadcrumbs.scss
index dc9c1f48..0ca3e975 100644
--- a/src/ui/layout/Breadcrumbs.scss
+++ b/src/ui/layout/Breadcrumbs.scss
@@ -2,8 +2,17 @@
 @use "../../styles/fonts" as fonts;
 @use "../../styles/variables" as vars;
 
+// Matches Angular's `flights-page-breadcrumbs .p-breadcrumb`:
+// dark-blue-opacity chip with 3px/10px/4px/10px padding and
+// `$space-s` bottom margin. Renders as a translucent pill over
+// the hero background rather than plain inline text.
 .breadcrumbs {
-  margin-bottom: vars.$space-m;
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px 4px 10px;
+  margin-bottom: vars.$space-s;
+  background-color: colors.$dark-blue-opacity;
+  border-radius: vars.$border-radius;
 
   &__list {
     display: flex;