Sidebar Styling issues with Mobile

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -38,13 +38,13 @@ const CartSidebarView: FC = () => {
         [s.empty]: error || success || isLoading || isEmpty,
       })}
     >
-      <header className="px-4 pt-6 pb-4 sm:px-6">
+      <header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
         <div className="flex items-start justify-between space-x-3">
           <div className="h-7 flex items-center">
             <button
               onClick={handleClose}
               aria-label="Close panel"
-              className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
+              className="hover:text-accent-3 transition ease-in-out duration-150 flex items-center focus:outline-none"
             >
               <Cross className="h-6 w-6" />
               <span className="ml-2 text-accent-7 text-xs hover:text-gray-500">

components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx

@@ -45,7 +45,7 @@ const CheckoutSidebarView: FC = () => {
         [s.empty]: error || success || isLoading || isEmpty,
       })}
     >
-      <header className="px-4 pt-6 pb-4 sm:px-6">
+      <header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
         <div className="flex items-start justify-between space-x-3">
           <div className="h-7 flex items-center">
             <button

components/checkout/PaymentMethodView/PaymentMethodView.tsx

@@ -11,7 +11,7 @@ const PaymentMethodView: FC = () => {
 
   return (
     <div className={s.root}>
-      <header className="px-4 pt-6 pb-4 sm:px-6">
+      <header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
         <div className="flex items-start justify-between space-x-3">
           <div className="h-7 flex items-center">
             <button

components/checkout/ShippingView/ShippingView.tsx

@@ -11,7 +11,7 @@ const PaymentMethodView: FC = () => {
 
   return (
     <div className={s.root}>
-      <header className="px-4 pt-6 pb-4 sm:px-6">
+      <header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
         <div className="flex items-start justify-between space-x-3">
           <div className="h-7 flex items-center">
             <button

components/product/ProductSlider/ProductSlider.module.css

@@ -3,6 +3,15 @@
   overflow-y: hidden;
 }
 
+.slider {
+  @apply relative h-full transition-opacity duration-150;
+  opacity: 0;
+}
+
+.slider.show {
+  opacity: 1;
+}
+
 .control {
   @apply bg-violet absolute bottom-10 right-10 flex flex-row
   border-accent-0 border text-accent-0 z-30 shadow-xl;
@@ -36,23 +45,46 @@
 .thumb {
   @apply transition-transform transition-colors ease-linear duration-75 overflow-hidden
   inline-block cursor-pointer;
-  width: 275px;
+  width: 125px;
 }
 
-.thumb:focus,
 .thumb.selected {
   @apply bg-white;
 }
 
-.thumb:hover {
-  transform: scale(1.02);
-  background-color: rgba(255, 255, 255, 0.08);
-}
-
 .album {
   @apply bg-violet-dark;
   overflow-y: hidden;
   overflow-x: auto;
   white-space: nowrap;
-  height: 275px;
+  height: 125px;
+}
+
+@screen md {
+  .thumb:hover {
+    transform: scale(1.02);
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .thumb.selected {
+    @apply bg-white;
+  }
+
+  .album {
+    height: 235px;
+  }
+
+  .slider {
+    max-height: 700px;
+  }
+
+  .thumb {
+    width: 235px;
+  }
+}
+
+@screen lg {
+  .slider {
+    max-height: 750px;
+  }
 }

components/product/ProductSlider/ProductSlider.tsx

@@ -77,8 +77,7 @@ const ProductSlider: FC = ({ children }) => {
     <div className={s.root} ref={sliderContainerRef}>
       <div
         ref={ref}
-        className="relative keen-slider h-full transition-opacity duration-150"
+        className={cn(s.slider, { [s.show]: isMounted }, 'keen-slider')}
-        style={{ opacity: isMounted ? 1 : 0 }}
       >
         {slider && (
           <div className={s.control}>

components/product/ProductView/ProductView.module.css

@@ -4,7 +4,7 @@
 
 .main {
   @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
-  min-height: 600px;
+  min-height: 500px;
 }
 
 .nameBox {
@@ -22,13 +22,17 @@
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
 }
 
 .sliderContainer {
   @apply flex items-center justify-center overflow-x-hidden bg-violet;
 }
 
+.imageContainer {
+  @apply text-center;
+}
+
 .imageContainer > div,
 .imageContainer > div > div {
   @apply h-full;
@@ -39,7 +43,7 @@
 }
 
 .button {
-  min-width: 300px;
+  width: 100%;
 }
 
 .wishlistButton {
@@ -47,13 +51,7 @@
 }
 
 @screen md {
-  .main {
-    min-height: 700px;
-  }
-
   .button {
-    text-align: center;
-    width: 100%;
     max-width: 300px;
   }
 }

components/product/ProductView/ProductView.tsx

@@ -185,7 +185,6 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
             >
               <ProductCard
                 key={p.path}
-                className={s.relatedProduct}
                 variant="simple"
                 className="animated fadeIn"
                 product={p}

components/ui/Sidebar/Sidebar.module.css

@@ -1,3 +1,8 @@
 .root {
   @apply fixed inset-0 overflow-hidden h-full z-50;
 }
+
+.sidebar {
+  @apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto;
+  min-width: 335px;
+}

components/ui/Sidebar/Sidebar.tsx

@@ -43,9 +43,7 @@ const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
             />
             <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
               <div className="h-full md:w-screen md:max-w-md">
-                <div className="h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto">
+                <div className={s.sidebar}>{children}</div>
-                  {children}
-                </div>
               </div>
             </section>
           </div>