From 79850983e6fcedb82377f2784e6d59c62727b71e Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Mon, 6 Jul 2020 19:10:25 +0300 Subject: [PATCH] fix(docs-infra): prevent search-bar from overlapping nav-items (#37938) As part of angular.io's responsive layout, the menu shown in the top-bar is collapsed into the sidenav on narrow screens at the point where the search-bar (on the right side of the top-bar) would overlap with the menu's nav-items. Previously, the value used as break-point would work on marketing pages, where the hamburger button is not shown on wide screens. However, on docs pages (where the hamburger button is always shown, pushing the menu further to the right), the search-bar would still overlap the menu nav-items on some resolutions. This commit fixes it by raising the screen width threshold at a value that ensures there is no overlap even on pages where the hamburger button is visible alongside the top-bar menu. Fixes #37937 PR Close #37938 --- aio/src/app/app.component.ts | 2 +- aio/src/styles/1-layouts/_top-menu.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts index 822f4b2e5e..42826349bf 100644 --- a/aio/src/app/app.component.ts +++ b/aio/src/app/app.component.ts @@ -14,7 +14,7 @@ import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; import { first, map } from 'rxjs/operators'; const sideNavView = 'SideNav'; -export const showTopMenuWidth = 992; +export const showTopMenuWidth = 1048; export const dockSideNavWidth = 992; export const showFloatingTocWidth = 800; diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss index da915c8b62..5166b295ef 100644 --- a/aio/src/styles/1-layouts/_top-menu.scss +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -1,5 +1,5 @@ // VARIABLES -$showTopMenuWidth: 992px; +$showTopMenuWidth: 1048px; $hideTopMenuWidth: $showTopMenuWidth - 1; $hamburgerShownMargin: 0 8px 0 0; $hamburgerHiddenMargin: 0 16px 0 -64px;