Add correct spacing for HomeLayout component (#867)

* add correct spacing for HomeLayout component

* simplify

* use Carousel

* fix spacing at the bottom

lib/experimental/Navigation/Page/index.stories.tsx

@@ -7,6 +7,8 @@ import * as HeaderStories from "../Header/PageHeader/index.stories"
 import { Tabs } from "../Tabs"
 import * as TabsStories from "../Tabs/index.stories"
 
+import { HomeLayout } from "@/experimental/PageLayouts/HomeLayout"
+import { Default as DefaultHomeLayoutStory } from "@/experimental/PageLayouts/HomeLayout/index.stories"
 import { StandardLayout } from "@/experimental/PageLayouts/StandardLayout"
 
 const meta: Meta<typeof Page> = {
@@ -76,3 +78,27 @@ export const Daytime: Story = {
     </DaytimePage>
   ),
 }
+
+export const DaytimeHomeLayout: Story = {
+  args: {
+    period: "morning",
+  },
+  argTypes: {
+    period: {
+      control: "select",
+      options: ["morning", "afternoon", "evening"],
+    },
+  },
+  render: ({ period }) => (
+    <DaytimePage
+      period={period}
+      header={
+        <div className="px-3 py-4 lg:px-6">
+          <p className="text-xl font-semibold">Good morning, Saul!</p>
+        </div>
+      }
+    >
+      <HomeLayout {...DefaultHomeLayoutStory.args} />
+    </DaytimePage>
+  ),
+}

lib/experimental/PageLayouts/HomeLayout/index.stories.tsx

@@ -62,6 +62,7 @@ export const Default: Story = {
       defaultViewport: "reset",
     },
   },
+  args: meta.args,
 }
 
 export const Mobile: Story = {

lib/experimental/PageLayouts/HomeLayout/index.tsx

@@ -1,4 +1,4 @@
-import { WidgetStrip } from "@/experimental/Widgets/Layout/WidgetStrip"
+import { Carousel } from "@/experimental/Navigation/Carousel"
 import {
   Children,
   forwardRef,
@@ -27,14 +27,27 @@ export const HomeLayout = forwardRef<HTMLDivElement, Props>(function Dashboard(
   const canShowContent = !!width
   const isSmallerScreen = canShowContent && width < 992
 
-  const arrayWidgets = Children.toArray(widgets).filter((widget) => !!widget)
+  let arrayWidgets = Children.toArray(widgets).filter((widget) => !!widget)
 
   if (isSmallerScreen) {
+    arrayWidgets = arrayWidgets.map((widget, i) => (
+      <div key={i} className="h-full [&>div]:h-full [&>div]:shadow-none">
+        {widget}
+      </div>
+    ))
     return (
-      <div ref={ref} className="flex flex-col gap-6">
+      <div ref={ref} className="flex flex-col gap-6 px-3 pb-3 pt-2">
         {canShowContent && (
           <>
-            <WidgetStrip>{arrayWidgets}</WidgetStrip>
+            <Carousel
+              columns={{
+                default: 1,
+                md: 2,
+              }}
+              showArrows={false}
+            >
+              {arrayWidgets}
+            </Carousel>
             <main>{children}</main>
           </>
         )}
@@ -43,10 +56,7 @@ export const HomeLayout = forwardRef<HTMLDivElement, Props>(function Dashboard(
   }
 
   return (
-    <div
-      ref={ref}
-      className="grid h-screen grid-cols-3 grid-rows-[auto,1fr,1fr,1fr] gap-6"
-    >
+    <div ref={ref} className="grid grid-cols-3 gap-6 px-6 pb-6 pt-2">
       {canShowContent && (
         <>
           <div className="col-span-3 flex flex-row gap-6 *:flex-1">