header menu arrow links

src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss

@@ -17,7 +17,7 @@
       padding: 0 2rem;
     }
 
-    // Large desktop Layout >1441px
+    // Large desktop Layout >1600px
     @include breakpoint($xlarge) {
       max-width: 1216px;
       padding: 0;
@@ -38,9 +38,9 @@
       padding: 0 2rem;
     }
 
-    // Large desktop Layout >1441px
+    // Large desktop Layout >1200px
     @include breakpoint($extrawide) {
-      max-width: 1440px;
+      max-width: 1216px;
       padding: 0;
     }
   }

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss

@@ -19,14 +19,20 @@
     padding: 0;
     width: 100%;
 
+    li {
+      //width: min-content;
+      //min-width: min-content;
+      //max-width: max-content;
+      //width: 100%;
+    }
+
     // First level menu items
     .desktop-menu-link {
       background-color: transparent;
-      //border: none;
+      border: none;
       color: var(--brand-main-nearly-black);
       cursor: pointer;
       font-family: var(--main-font-family);
-      border: 1px solid red;
 
       @include breakpoint($extrawide) {
         @include font-size(14px, 14px);
@@ -65,7 +71,10 @@
       }
 
       &__label {
-        border: 1px solid blue;
+        width: min-content;
+        @include breakpoint($xlarge) {
+          width: 100%;
+        }
       }
 
       hy-icon {
@@ -115,7 +124,7 @@
 
       &--is-active {
         background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);
-        box-shadow: 0 0 20px 0 rgba(14, 104, 139, 0.2);
+        box-shadow: 0 0 20px 0 rgba(14, 104, 139, 0.1) inset;
         display: flex;
         flex-direction: row;
         opacity: 1;
@@ -151,6 +160,7 @@
       &__desktop-menu {
         display: flex;
         margin-bottom: -8px;
+        margin-top: 6px;
 
         &__menu-items {
           //@todo check max-with in Specs
@@ -291,7 +301,7 @@
       left: 0; // override in js
       list-style: none;
       min-width: 350px;
-      margin: 0 4px;
+      margin: 6px 4px 0 4px;
       max-width: 400px;
       padding: 0 48px;
       top: 0;

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

@@ -50,6 +50,22 @@ export class HyDesktopMenuLinks {
     this.dataDesktopLinksWatcher(this.dataDesktopLinks);
   }
 
+  /*
+  @Listen('resize', {target: 'window'})
+  resizeEventListener(event) {
+    if (!event) return;
+
+    const breadcrumbsElement = document.querySelectorAll('.hy-breadcrumbs')[0];
+    if (breadcrumbsElement) {
+      if (breadcrumbsWidth + 64 >= document.body.scrollWidth) {
+        this.adjustBreadcrumbsMenuVisibility(true);
+      } else {
+        this.adjustBreadcrumbsMenuVisibility(false);
+      }
+    }
+  }
+   */
+
   showBackdropShadow(state = 'close', top = 0) {
     let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
     let hyBackdropDiv = hyHeader.children[0] as HTMLElement;