diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts index f36b6d77e4..996a24fe91 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 = 1048; +export const showTopMenuWidth = 1150; export const dockSideNavWidth = 992; export const showFloatingTocWidth = 800; diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu.scss b/aio/src/styles/1-layouts/top-menu/_top-menu.scss index 9d76cc6a80..45c1a6f6c2 100644 --- a/aio/src/styles/1-layouts/top-menu/_top-menu.scss +++ b/aio/src/styles/1-layouts/top-menu/_top-menu.scss @@ -1,7 +1,7 @@ @use '../../mixins'; // VARIABLES -$showTopMenuWidth: 1048px; +$showTopMenuWidth: 1150px; $hideTopMenuWidth: $showTopMenuWidth - 1; $hamburgerShownMargin: 0 8px 0 0; $hamburgerHiddenMargin: 0 16px 0 -64px; @@ -132,7 +132,10 @@ mat-toolbar.app-toolbar { .nav-link-inner { border-radius: 4px; + font-size: 1.3rem; + font-size: clamp(10px, 1.6rem, 20px); padding: 8px 16px; + padding: 8px clamp(5px, 0.7vw, 16px); } &:focus { @@ -183,7 +186,7 @@ mat-toolbar.app-toolbar { } } - @media (max-width: 480px) { + @media (max-width: 515px) { width: 150px; } } diff --git a/aio/tests/e2e/src/app.e2e-spec.ts b/aio/tests/e2e/src/app.e2e-spec.ts index e341324858..50e77ca67b 100644 --- a/aio/tests/e2e/src/app.e2e-spec.ts +++ b/aio/tests/e2e/src/app.e2e-spec.ts @@ -5,7 +5,9 @@ describe('site App', () => { let page: SitePage; beforeEach(async () => { - await SitePage.setWindowWidth(1050); // Make the window wide enough to show the SideNav side-by-side. + // Make the window wide enough to show the SideNav side-by-side + // (bigger than the app component's showTopMenuWidth). + await SitePage.setWindowWidth(1200); page = new SitePage(); });