Adjust menu outline on large screens with single button width toolbox

src/components/menus/header-menu/header-menu.vue

@@ -637,11 +637,15 @@ $toggle-width: 50px;
     background-image: colors.$color-window-bg;
     @include mixins.boxSize();
     @include ui.nestedMenu();
-
+    
     @include mixins.large() {
         min-width: 100%;
         max-width: variables.$ideal-width;
         padding-left: variables.$spacing-xlarge;
+
+        @media screen and (min-height: variables.$ideal-height) {
+            padding-left: variables.$spacing-medium + variables.$spacing-xsmall;
+        }
     }
 
     @include mixins.mobile() {

src/components/toolbox/toolbox.vue

@@ -350,7 +350,7 @@ $toolButtonWidth: variables.$spacing-large;
 
     // tall screens
 
-    @media screen and (min-height: 880px) {
+    @media screen and (min-height: variables.$ideal-height) {
         @include mixins.large() {
             width: 52px !important;
         }

src/styles/_variables.scss

@@ -2,6 +2,7 @@
 
 $mobile-width: 640px; // the threshold below which we start to use the mobile view
 $ideal-width: 990px;
+$ideal-height: 880px; // shows single button width toolbar
 $menu-height: 46px;
 $heading-height: 40px;
 $modal-header-height: 48px;