Match Angular H1 size, accordion icon grey, and full month on active tab

Three visible gaps after the SEO/title pass:

1. The page H1 ('Информация о рейсе: …') rendered at 22px/regular —
   a fourth of the size Angular shows. Angular inherits the global
   h1 rule (font-size-xxxl = 42px) and clamps to 36px on tablet /
   22px on mobile. The .flight-details__flight-number override was
   pinning it at font-size-xl2. Restore 42px with the same tablet/
   mobile clamps.

2. Accordion row icons (Регистрация / Посадка / Высадка / Борт /
   Питание / Услуги) used the brand blue. Angular's sprite stroke
   is #657282 (neutral grey), which lets the red 'Закончена' status
   next to it read as the dominant color. Switch details-row__icon
   to #657282.

3. DayTabs abbreviated every tab's month to 'апр.'; Angular spells
   the selected tab out in full ('18 апреля') and keeps siblings
   short. DayTabButton now picks `month: 'long'` when isActive.
This commit is contained in:
2026-04-19 01:57:37 +03:00
parent ffb1a8579d
commit 5238ee4162
3 changed files with 22 additions and 3 deletions
@@ -20,7 +20,11 @@ export const DayTabButton: FC<DayTabButtonProps> = ({
const d = parseYyyymmdd(date);
const weekday = new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d);
const day = new Intl.DateTimeFormat(locale, { day: "numeric" }).format(d);
const month = new Intl.DateTimeFormat(locale, { month: "short" }).format(d);
// Angular shows the selected tab with the full month name ('18 апреля'),
// siblings with the abbreviated form ('19 апр.'). Mirror that.
const month = new Intl.DateTimeFormat(locale, {
month: isActive ? "long" : "short",
}).format(d);
const classes = [
"day-tab",
@@ -244,9 +244,21 @@
padding: vars.$space-xl;
}
// Page H1. Angular applies the global h1 rule (42px regular) — match it
// here and clamp down on narrower viewports like Angular does.
&__flight-number {
font-size: fonts.$font-size-xl2;
font-size: fonts.$font-size-xxxl;
font-weight: fonts.$font-regular;
color: colors.$white;
margin: 0;
line-height: 1.2;
@include screen.smTablet {
font-size: fonts.$font-size-xxxl--tablet;
}
@include screen.mobile {
font-size: fonts.$font-size-xxxl--mobile;
}
}
&__overall-status {
@@ -70,7 +70,10 @@
justify-content: center;
width: 28px;
height: 28px;
color: #2457ff;
// Angular renders the transition/aircraft icons in a neutral grey
// (sprite stroke = #657282). Match it so the row doesn't overpower
// the red 'Закончена' status next to it.
color: #657282;
flex-shrink: 0;
}