EditListingPage secondary navigation (tabs) styled for mobile

src/components/EditListingWizard/EditListingWizard.css

@@ -1,10 +1,23 @@
+@import '../../marketplace.css';
+
 .root {
+  /* Layout */
   width: 100%;
   height: 100%;
 }
 
 .nav {
-  margin: 1rem;
+  /* Layout */
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 11px 24px 0 24px;
+
+  border-top-width: 1px;
+  border-top-color: var(--matterColorNegative);
+  border-top-style: solid;
+  background-color: var(--matterColorLight);
+  box-shadow: var(--boxShadow);
 }
 
 .panel {

src/components/TabNav/TabNav.css

@@ -1,6 +1,8 @@
 @import '../../marketplace.css';
 
 .root {
+  overflow-x: auto;
+
   &::after {
     content: ".";
     visibility: hidden;

src/containers/EditListingPage/EditListingPage.css

@@ -1,3 +1,27 @@
+@import '../../marketplace.css';
+
+.mobileTopbar {
+  /* Size */
+  width: 100%;
+  height: var(--topbarHeight);
+
+  /* Layout for child components */
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  /* fill */
+  background-color: var(--matterColorLight);
+
+  /* shadows */
+  box-shadow: none;
+
+  @media (--desktopViewport) {
+    display: none;
+  }
+}
+
 .wizard {
   flex-grow: 1;
 }

src/containers/EditListingPage/EditListingPage.js

@@ -91,7 +91,7 @@ export const EditListingPageComponent = props => {
 
     return (
       <PageLayout title={title} scrollingDisabled={scrollingDisabled}>
-        <Topbar history={history} location={location} />
+        <Topbar mobileRootClassName={css.mobileTopbar} history={history} location={location} />
         <EditListingWizard
           className={css.wizard}
           disabled={disableForm}

src/containers/InboxPage/InboxPage.css

@@ -33,6 +33,7 @@
   border-top-width: 1px;
   border-top-color: var(--matterColorNegative);
   border-top-style: solid;
+  background-color: var(--matterColorLight);
   box-shadow: var(--boxShadow);
 }