feat: APPS-3527 change breakpoints from standard small to 850px (#858)

* fix: change breakpoints from standard small to 850px

* fix: 850px comment

---------

Co-authored-by: Jess Divers <[email protected]>

Author: farosFreed

packages/vue-component-library/src/lib-components/NavPrimary.vue

@@ -154,7 +154,8 @@ defineExpose({ closeSlot })
 const { width } = useWindowSize()
 
 // Use computed to check if it's mobile based on window width
-const isMobile = computed(() => width.value <= 750) // Use 750px for mobile breakpoint
+const mobileBreakpoint = 850 // change scss breakpoints in ftva _header-sticky.scss, _nav-primary.scss, _site-brand-bar.scss
+const isMobile = computed(() => width.value <= mobileBreakpoint) // Use 850px for mobile breakpoint
 
 // toggle Mobile-only menu
 function toggleMobileMenu() {

packages/vue-component-library/src/styles/ftva/_header-sticky.scss

@@ -18,7 +18,7 @@
             line-height: normal;
         }
     }
-    @media #{$small} {
+    @media (max-width: 850px) {
         .primary {
             padding-inline: 18px;
         }

packages/vue-component-library/src/styles/ftva/_nav-primary.scss

@@ -113,7 +113,7 @@
     }
 
     // MOBILE MENU STYLES
-    @media #{$small} {
+    @media (max-width: 850px) {
         display: flex;
         flex-direction: column;
         grid-auto-flow: unset;

packages/vue-component-library/src/styles/ftva/_site-brand-bar.scss

@@ -1,6 +1,6 @@
 .ftva.site-brand-bar {
     background-color: var(--ftva-off-black);
-    height: 110px;
+    height: 0px;
     .ucla-text {
         @include ftva-site-wordmark;
         color: white;
@@ -10,4 +10,7 @@
             text-transform: uppercase;
         }
     }
+    @media (min-width: 850px) {
+        height: 110px;
+    }
 }