Bump to vanilla-4.7.0 (canonical#13548)

* Bump to vanilla-4.7.0

* Revert navigation padding

* Update global-nav padding to align with content

* Add p-navigation__row--25-75

* Make css adjustments to fit new vainlla pattern

* Apply changes from cpde review

* Re-align secondary nav

* Make top nav align right

* Decrease breakpoint-threshold

* Format SCSS

package.json

@@ -118,7 +118,7 @@
     "typescript": "4.5.4",
     "url-polyfill": "1.1.12",
     "url-search-params-polyfill": "8.1.1",
-    "vanilla-framework": "4.5.1",
+    "vanilla-framework": "4.7.0",
     "yup": "0.32.11"
   },
   "resolutions": {

static/js/src/navigation.js

@@ -1,5 +1,5 @@
 const ANIMATION_DELAY = 200;
-const MOBILE_VIEW_BREAKPOINT = 1281;
+const MOBILE_VIEW_BREAKPOINT = 1228;
 const dropdownWindow = document.querySelector(".dropdown-window");
 const dropdownWindowOverlay = document.querySelector(
   ".dropdown-window-overlay"

static/sass/_global-settings.scss

@@ -1,5 +1,5 @@
 $breakpoint-medium: 875px;
-$viewport-threshold: 1281px;
+$viewport-threshold: 1212px;
 $color-brand: #e95420;
 $color-dark: #111;
 $color-positive: #0e8420 !default;

static/sass/_pattern_navigation-dropdown.scss

@@ -14,6 +14,14 @@
     @media (max-width: $breakpoint-navigation-threshold - 1) {
       display: none !important;
     }
+
+    .global-nav-dropdown .global-nav__row {
+      padding: 0 2rem;
+
+      .col-9 {
+        margin-left: 0.25rem;
+      }
+    }
   }
 
   .dropdown-window-overlay {
@@ -114,11 +122,12 @@
 
   .dropdown-window__main-panel,
   .dropdown-window__side-panel {
-    margin: 2.5rem 0 2.5rem -0.5rem;
+    margin: 2rem 0 2.5rem -0.5rem;
 
     .p-muted-heading {
       color: rgba(255, 255, 255, 0.6);
       padding-left: 0.5rem;
+      padding-top: 0.25rem;
     }
 
     .p-navigation__dropdown-item {
@@ -168,7 +177,7 @@
   }
 
   .dropdown-window__side-panel {
-    margin: 2.5rem 0;
+    margin: 2rem 0;
     padding: 0;
 
     .p-list {