Merge pull request #4075 from glo71317/PWA-2615

Venia header/layout broken in offline mode
magento · May 15, 2023 · 879a25c · 879a25c
2 parents 99925fa + 4420b4b
commit 879a25c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/header.spec.js.snap b/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/header.spec.js.snap
@@ -23,10 +23,6 @@ Array [
       >
         <NavTrigger />
       </div>
-      <OnlineIndicator
-        hasBeenOffline={false}
-        isOnline={true}
-      />
       <MegaMenu />
       <div
         className="secondaryActions"
@@ -42,5 +38,9 @@ Array [
       id="pageLoadingIndicator"
     />
   </header>,
+  <OnlineIndicator
+    hasBeenOffline={false}
+    isOnline={true}
+  />,
 ]
 `;
diff --git a/packages/venia-ui/lib/components/Header/header.js b/packages/venia-ui/lib/components/Header/header.js
@@ -68,10 +68,7 @@ const Header = props => {
                     <div className={classes.primaryActions}>
                         <NavTrigger />
                     </div>
-                    <OnlineIndicator
-                        hasBeenOffline={hasBeenOffline}
-                        isOnline={isOnline}
-                    />
+
                     <Link
                         aria-label={title}
                         to={resourceUrl('/')}
@@ -93,6 +90,10 @@ const Header = props => {
                 {searchBar}
                 <PageLoadingIndicator absolute />
             </header>
+            <OnlineIndicator
+                hasBeenOffline={hasBeenOffline}
+                isOnline={isOnline}
+            />
         </Fragment>
     );
 };

diff --git a/packages/venia-ui/lib/components/Header/onlineIndicator.module.css b/packages/venia-ui/lib/components/Header/onlineIndicator.module.css
@@ -7,9 +7,8 @@
     composes: ml-18 from global;
     composes: w-[3rem] from global;
     grid-area: primary;
-
     composes: sm_justify-self-start from global;
-    composes: sm_ml-10 from global;
+    composes: ml-6 from global;
 }
 
 @media (min-width: 640px) {