From c3a27f1c2a3fdf7bdb1b2e905b23cb1e37b1ed12 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Wed, 3 Jul 2024 15:07:34 -0600
Subject: [PATCH] fix(#1706): allow app-header height to accomodate long header
 text

---
 .../components/app-header/AppHeader.svelte    | 103 ++++++++++--------
 .../src/components/popover/Popover.svelte     |   1 +
 2 files changed, 59 insertions(+), 45 deletions(-)

diff --git a/libs/web-components/src/components/app-header/AppHeader.svelte b/libs/web-components/src/components/app-header/AppHeader.svelte
index 07d34801e..ebd401b8f 100644
--- a/libs/web-components/src/components/app-header/AppHeader.svelte
+++ b/libs/web-components/src/components/app-header/AppHeader.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
   import {onDestroy, onMount, tick} from "svelte";
   import {MOBILE_BP, TABLET_BP} from "../../common/breakpoints";
-  import {getSlottedChildren} from "../../common/utils";
+  import {getSlottedChildren, styles} from "../../common/utils";
   import {isUrlMatch, getMatchedLink} from "../../common/urls";
   import {AppHeaderMenuProps} from "../app-header-menu/AppHeaderMenu.svelte";
 
@@ -205,17 +205,15 @@
 
     <!-- Menu button for mobile -->
     {#if _showToggleMenu && _mobile}
-      <button
-        on:click={toggleMenu}
-        class="menu-toggle-area"
-        data-testid="menu-toggle"
-      >
-        Menu
-        <goa-icon
-          type={_showMenu ? "chevron-up" : "chevron-down"}
-          mt="1"
-        />
-      </button>
+      <div class="menu-toggle-area">
+        <button
+          on:click={toggleMenu}
+          data-testid="menu-toggle"
+        >
+          Menu
+          <goa-icon type={_showMenu ? "chevron-up" : "chevron-down"} mt="1" />
+        </button>
+      </div>
     {/if}
 
     <!-- Menu and menu button for tablet -->
@@ -223,19 +221,23 @@
       <goa-popover
         class="menu"
         open={_showMenu}
+        minwidth="16rem"
         context="app-header-menu"
         focusborderwidth="0"
         borderradius="0"
         padded="false"
-        width="16rem"
         tabindex="-1"
+        height="full"
         position="below"
         on:_close={hideMenu}
       >
-        <div slot="target">
+        <div 
+          slot="target" 
+          style={styles("height: 100%")} 
+          class="menu-toggle-area"
+        >
           <button
             on:click={toggleMenu}
-            class="menu-toggle-area"
             data-testid="menu-toggle"
           >
             Menu
@@ -294,11 +296,9 @@
 
   .title {
     margin-left: var(--goa-space-s);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     color: var(--goa-color-text-default);
     font: var(--goa-typography-body-s);
+    max-width: 624px;
   }
 
   /* contains all children within component */
@@ -306,7 +306,6 @@
     width: 100%;
     display: grid;
     grid-template-columns: 1fr auto;
-    grid-template-rows: 3.375rem auto;
     grid-template-areas:
       "header menu"
       "links links";
@@ -316,9 +315,16 @@
     grid-area: header;
 
     display: flex;
-    align-items: center;
-    padding: 0 var(--goa-space-m);
     text-decoration: none;
+    padding: var(--goa-space-m);
+    align-items: flex-start;
+  }
+
+  .tablet .header-logo-title-area,
+  .desktop .header-logo-title-area {
+    min-height: calc(
+      4rem - 2*(var(--goa-spacing-m))
+    ); /* desired min-height minus the required padding */
   }
 
   .header-logo-title-area:focus {
@@ -333,32 +339,32 @@
 
   .menu-toggle-area {
     grid-area: menu;
+    display: flex;
+    align-items: flex-end;
+    justify-content: right;
+    gap: var(--goa-space-2xs);
+  }
 
-    color: var(--goa-color-text-default);
+  .menu-toggle-area button {
+    display: flex;
     align-items: center;
     background: transparent;
     border: none;
+    color: var(--goa-color-text-default);
     cursor: pointer;
-    display: flex;
-    gap: 0.25rem;
-    justify-content: right;
-    padding: 1rem;
     text-decoration: underline;
+    padding-left: var(--goa-space-m);
   }
 
   .menu-toggle-area goa-icon {
     scale: 0.8;
   }
 
-  .menu-toggle-area:focus {
+  .menu-toggle-area:focus-visible {
     outline: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
     outline-offset: calc(-1 * var(--goa-border-width-l));
   }
 
-  goa-popover .menu-toggle-area:focus {
-    outline-offset: 0;
-  }
-
   .image-desktop {
     height: 2rem;
   }
@@ -373,7 +379,7 @@
     font: var(--goa-typography-body-m);
     text-decoration: none;
     color: var(--goa-color-text-default);
-    padding: calc((3rem - var(--goa-line-height-3)) / 2) 1rem;
+    padding: calc((3rem - var(--goa-line-height-3)) / 2) var(--goa-space-m);
     cursor: pointer;
     white-space: nowrap;
   }
@@ -395,6 +401,8 @@
     color: var(--goa-color-interactive-default);
   }
 
+  /* Mobile */
+
   .mobile :global(::slotted(a)) {
     box-shadow: inset 0 var(--goa-border-width-s) 0 0 var(--goa-color-greyscale-200);
   }
@@ -412,7 +420,13 @@
     border-bottom: var(--goa-border-width-m) solid var(--goa-color-greyscale-200);
   }
 
+  .mobile .menu-toggle-area button {
+    height: 3.375rem;
+    margin: 0 var(--goa-space-xs);
+  }
+
   /* Tablet */
+
   .tablet *,
   .tablet:global(::slotted(*)) {
     font: var(--goa-typography-body-m);
@@ -431,12 +445,8 @@
   }
 
   .tablet .header-logo-title-area {
-    padding: 0 var(--goa-space-l);
-    min-height: 4rem;
-  }
-
-  .tablet .layout {
-    grid-template-rows: 4rem auto;
+    padding: var(--goa-space-m) 0;
+    min-height: calc(4rem - 2 * var(--goa-space-m)); /* - top/bottom padding */
   }
 
   .tablet .title {
@@ -444,6 +454,10 @@
     font: var(--goa-typography-body-m);
   }
 
+  .tablet .menu-toggle-area button {
+    height: 4rem;
+  }
+
   @media (--tablet) {
     /*padding is independent from fullmenubreakpoint, should use media query*/
     .container {
@@ -452,6 +466,7 @@
   }
 
   /* Desktop */
+
   .desktop .content-area {
     grid-area: menu;
     display: flex;
@@ -461,11 +476,11 @@
   .desktop .header-logo-title-area {
     grid-area: header;
     display: flex;
-    align-items: center;
-    grid-template-rows: 3.375rem auto;
+    align-items: flex-start;
     color: inherit;
     flex: 1 1 auto;
-    min-height: 4rem;
+    padding: var(--goa-space-m) 0;
+    min-height: calc(4rem - 2 * var(--goa-space-m)); /* - top/bottom padding */
   }
 
   .desktop .image-desktop {
@@ -493,10 +508,9 @@
   .desktop :global(::slotted(a:visited)) {
     color: var(--goa-color-text-default);
     font-weight: var(--goa-font-weight-bold);
-    grid-template-rows: 3.375rem auto;
     display: inline-flex;
-    align-items: center;
-    padding: 0 0.75rem;
+    align-items: flex-start;
+    padding: var(--goa-space-m) var(--goa-space-s);
   }
 
   .desktop :global(::slotted(goa-app-header-menu)) {
@@ -518,7 +532,6 @@
 
   .desktop :global(::slotted(a.current)) {
     border-top: 4px solid var(--goa-color-interactive-default);
-    border-bottom: 4px solid transparent;
   }
 
   .desktop :global(::slotted(a.current:hover)) {
diff --git a/libs/web-components/src/components/popover/Popover.svelte b/libs/web-components/src/components/popover/Popover.svelte
index c3b113bd0..26004b526 100644
--- a/libs/web-components/src/components/popover/Popover.svelte
+++ b/libs/web-components/src/components/popover/Popover.svelte
@@ -286,6 +286,7 @@
 
   .popover-target {
     cursor: pointer;
+    height: 100%;
   }
 
   .popover-target:has(:focus-visible) {