Fix ui issues

Author: yansavitski

examples/sandbox/src/Router.tsx

@@ -19,13 +19,7 @@ export default function Router() {
   const isHomePage = location.pathname === "/";
 
   return (
-    <div
-      className={`${
-        isHomePage
-          ? "App"
-          : "text-black bg-white w-screen max-w-screen-xl mx-auto"
-      }`}
-    >
+    <div className={`${isHomePage ? "App" : "text-black bg-white mx-auto"}`}>
       <Switch>
         <Route exact path="/" component={Root} />
 

examples/sandbox/src/pages/ecommerce/Category.jsx

@@ -59,7 +59,7 @@ const BrowseHeader = ({ category }) => {
 export default function CategoryPage(props) {
   const category = props?.match?.params.category;
   return (
-    <>
+    <div className="ecommerce-container">
       <Navigation />
       <BrowseHeader category={category} />
       <SearchProvider config={categoryPageconfig(category)}>
@@ -114,6 +114,6 @@ export default function CategoryPage(props) {
           </ErrorBoundary>
         </div>
       </SearchProvider>
-    </>
+    </div>
   );
 }

examples/sandbox/src/pages/ecommerce/ListingPage.jsx

@@ -65,7 +65,7 @@ const categoryItems = {
 
 export default () => {
   return (
-    <>
+    <div className="ecommerce-container">
       <Navigation />
       <div className="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:px-8 grid md:grid-cols-4 gap-4 grid-cols-2">
         {Object.keys(categoryItems).map((category) => (
@@ -86,6 +86,6 @@ export default () => {
           </div>
         ))}
       </div>
-    </>
+    </div>
   );
 };

examples/sandbox/src/pages/ecommerce/Search.jsx

@@ -68,11 +68,11 @@ const Search = () => {
 };
 export default function App() {
   return (
-    <>
+    <div className="ecommerce-container">
       <Navigation />
       <SearchProvider config={config}>
         <Search />
       </SearchProvider>
-    </>
+    </div>
   );
 }

examples/sandbox/src/pages/ecommerce/index.jsx

@@ -3,11 +3,11 @@
 import * as React from "react";
 import Navigation from "./components/Navigation";
 import ProductCarousel from "./components/ProductCarousel";
-import "./styles.css";
+import "./styles.scss";
 
 export default function Ecommerce() {
   return (
-    <>
+    <div className="ecommerce-container">
       <Navigation />
       <div className="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
         <ProductCarousel
@@ -19,6 +19,6 @@ export default function Ecommerce() {
           filters={[{ field: "parent_category", values: ["Monitors"] }]}
         />
       </div>
-    </>
+    </div>
   );
 }

examples/sandbox/src/pages/ecommerce/styles.css

@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.ecommerce-container {
+  .sui-layout-header.sui-layout-header {
+    padding: 0;
+  }
+
+  .sui-layout-main-header {
+    margin-bottom: 1rem;
+  }
+
+  .sui-layout-header {
+    border: none;
+  }
+
+  .navigation {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    background-color: #000;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 0.15s;
+  }
+
+  .sui-search-box__suggestion-list {
+    width: 200px;
+  }
+}

examples/sandbox/src/pages/ecommerce/styles.scss

@@ -20,7 +20,6 @@
 }
 
 body {
-  place-items: center;
   font-family: var(--font-family);
   background-color: var(--background);
   color: var(--foreground);