From 24ac37891c70faaf8a85d332278ecd58282dc957 Mon Sep 17 00:00:00 2001
From: dario-piotrowicz <dario.piotrowicz@gmail.com>
Date: Fri, 2 Jul 2021 21:57:21 +0100
Subject: [PATCH] fix(docs-infra): slightly improve top-menu responsiveness
 (#42753)

make sure that the top-menu links don't get overlapped by
the search input, regardless on the browser's font-size and
the window's width

make also sure that the header's logo does not overlap the search
input on narrow windows, again regardless on the browser's font-size

PR Close #42753
---
 aio/src/app/app.component.ts                     | 2 +-
 aio/src/styles/1-layouts/top-menu/_top-menu.scss | 7 +++++--
 aio/tests/e2e/src/app.e2e-spec.ts                | 4 +++-
 3 files changed, 9 insertions(+), 4 deletions(-)

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();
   });