Play with transparent header in desktop

packages/web/components/patterns/PrimaryHeader.tsx

@@ -159,16 +159,17 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
           zIndex: 5,
           width: '100%',
           boxShadow: props.isDisplayingShadow ? '$panelShadow' : 'unset',
-          bg: '$grayBase',
           p: '0px $3 0px $3',
           height: '68px',
           position: 'fixed',
-          minHeight: '68px',
+          bg: 'transparent',
           '@smDown': {
             height: '48px',
-            minHeight: '48px',
             p: '0px 18px 0px 16px',
           },
+          '@lgDown': {
+            bg: '$grayBase',
+          },
         }}
       >
         <HStack alignment="center" distribution="start">

packages/web/components/templates/PrimaryLayout.tsx

@@ -84,8 +84,8 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
         <Box
           ref={props.scrollElementRef}
           css={{
-            top: '68px',
-            '@smDown': { top: '48px' },
+            // top: '68px',
+            // '@smDown': { top: '48px' },
             position: 'fixed',
             overflowY: 'auto',
             height: '100%',
@@ -93,6 +93,14 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
             bg: '$grayBase',
           }}
         >
+                  <Box
+          ref={props.scrollElementRef}
+          css={{
+            height: '68px',
+            bg: '$grayBase',
+            '@smDown': { height: '48px' },
+          }}
+        ></Box>
           {props.children}
           {showLogoutConfirmation ? (
             <ConfirmationModal