From 21b6176bac0c676b767d5e0b2d6e5fd60f4dda3f Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Fri, 27 Dec 2024 23:31:14 +0800
Subject: [PATCH 01/10] add w100% to collectionBanner

---
 .../dashboard/components/CollectionBanner/CollectionBanner.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/studio/src/features/dashboard/components/CollectionBanner/CollectionBanner.tsx b/apps/studio/src/features/dashboard/components/CollectionBanner/CollectionBanner.tsx
index 8d61087e37..22fcf121ee 100644
--- a/apps/studio/src/features/dashboard/components/CollectionBanner/CollectionBanner.tsx
+++ b/apps/studio/src/features/dashboard/components/CollectionBanner/CollectionBanner.tsx
@@ -17,6 +17,7 @@ export const CollectionBanner = (): JSX.Element | null => {
 
   return (
     <Stack
+      width="100%"
       justify="space-between"
       flexDir="row"
       bg="interaction.success-subtle.default"

From 95fa8b015c7436cdae6f863c9efce2196c8a594c Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Fri, 27 Dec 2024 23:31:27 +0800
Subject: [PATCH 02/10] add common Dashboard component

---
 .../dashboard/components/Dashboard.tsx        | 103 ++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 apps/studio/src/features/dashboard/components/Dashboard.tsx

diff --git a/apps/studio/src/features/dashboard/components/Dashboard.tsx b/apps/studio/src/features/dashboard/components/Dashboard.tsx
new file mode 100644
index 0000000000..e5310db8c9
--- /dev/null
+++ b/apps/studio/src/features/dashboard/components/Dashboard.tsx
@@ -0,0 +1,103 @@
+import type { ReactNode } from "react"
+import NextLink from "next/link"
+import {
+  Box,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Flex,
+  HStack,
+  Text,
+  VStack,
+} from "@chakra-ui/react"
+import { Breadcrumb } from "@opengovsg/design-system-react"
+
+export const Dashboard = ({
+  breadcrumbs,
+  icon,
+  title,
+  buttons,
+  banner,
+  table,
+}: {
+  breadcrumbs: {
+    href: string
+    label: string
+  }[]
+  icon: ReactNode
+  title: string
+  buttons: ReactNode
+  banner?: ReactNode
+  table: ReactNode
+}) => {
+  const allBreadcrumbsExceptLast = breadcrumbs.slice(0, -1)
+  const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1]
+  return (
+    <VStack
+      w="100%"
+      p="1.75rem"
+      gap="1rem"
+      height="0"
+      overflow="auto"
+      minH="100%"
+    >
+      <VStack w="100%" align="start">
+        <Breadcrumb size="sm" w="100%">
+          {allBreadcrumbsExceptLast.map(({ href, label }, index) => {
+            return (
+              <BreadcrumbItem key={index}>
+                <BreadcrumbLink href={href} as={NextLink}>
+                  <Text
+                    textStyle="caption-2"
+                    color="interaction.links.default"
+                    noOfLines={1}
+                    w="max-content"
+                  >
+                    {label}
+                  </Text>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            )
+          })}
+          <BreadcrumbItem
+            key={lastBreadcrumb?.href}
+            overflow="hidden"
+            whiteSpace="nowrap"
+          >
+            <Text
+              textStyle="caption-2"
+              color="base.content.default"
+              overflow="hidden"
+              textOverflow="ellipsis"
+            >
+              {lastBreadcrumb?.label}
+            </Text>
+          </BreadcrumbItem>
+        </Breadcrumb>
+        <Flex w="full" flexDir="row">
+          <HStack mr="1.25rem" overflow="auto" gap="0.75rem" flex={1}>
+            <Box
+              aria-hidden
+              bg="brand.secondary.100"
+              p="0.5rem"
+              borderRadius="6px"
+            >
+              {icon}
+            </Box>
+            <Text
+              noOfLines={1}
+              as="h3"
+              textStyle="h3"
+              textOverflow="ellipsis"
+              wordBreak="break-all"
+            >
+              {title}
+            </Text>
+          </HStack>
+          <HStack>{buttons}</HStack>
+        </Flex>
+      </VStack>
+      {banner && banner}
+      <Box width="100%">{table}</Box>
+    </VStack>
+  )
+}

From 90c2c8848dcc3c92f238f9db47f228a8917c4dab Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Fri, 27 Dec 2024 23:32:14 +0800
Subject: [PATCH 03/10] have Collection and Folder page use it

---
 .../[siteId]/collections/[resourceId].tsx     |  73 +++----
 .../[siteId]/folders/[folderId]/index.tsx     | 182 ++++++------------
 2 files changed, 80 insertions(+), 175 deletions(-)

diff --git a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
index 5995537de7..e44661bbf3 100644
--- a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
+++ b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
@@ -1,14 +1,5 @@
-import NextLink from "next/link"
-import {
-  Box,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  HStack,
-  Stack,
-  Text,
-  useDisclosure,
-} from "@chakra-ui/react"
-import { Breadcrumb, Button } from "@opengovsg/design-system-react"
+import { useDisclosure } from "@chakra-ui/react"
+import { Button } from "@opengovsg/design-system-react"
 import { useSetAtom } from "jotai"
 import { BiData } from "react-icons/bi"
 import { z } from "zod"
@@ -17,6 +8,7 @@ import { PermissionsBoundary } from "~/components/AuthWrappers"
 import { folderSettingsModalAtom } from "~/features/dashboard/atoms"
 import { CollectionBanner } from "~/features/dashboard/components/CollectionBanner"
 import { CollectionTable } from "~/features/dashboard/components/CollectionTable"
+import { Dashboard } from "~/features/dashboard/components/Dashboard"
 import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal"
 import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal"
 import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal"
@@ -49,38 +41,21 @@ const CollectionResourceListPage: NextPageWithLayout = () => {
 
   return (
     <>
-      <Stack w="100%" p="1.75rem" gap="1rem" height="$100vh" overflow="auto">
-        <Breadcrumb size="sm">
-          <BreadcrumbItem>
-            <BreadcrumbLink href={`/sites/${siteId}`} as={NextLink}>
-              <Text textStyle="caption-2" color="interaction.links.default">
-                Home
-              </Text>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbItem>
-            <BreadcrumbLink isCurrentPage>
-              <Text textStyle="caption-2" color="base.content.default">
-                {metadata.title}
-              </Text>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-        </Breadcrumb>
-        <HStack w="100%" gap="1.5rem">
-          <HStack gap="0.75rem" flex={1}>
-            <Box
-              aria-hidden
-              bg="brand.secondary.100"
-              p="0.5rem"
-              borderRadius="6px"
-            >
-              <BiData />
-            </Box>
-            <Text wordBreak="break-word" noOfLines={1} as="h3" textStyle="h3">
-              {metadata.title}
-            </Text>
-          </HStack>
-          <HStack align="center" gap="0.75rem">
+      <Dashboard
+        breadcrumbs={[
+          {
+            href: `/sites/${siteId}`,
+            label: "Home",
+          },
+          {
+            href: `/sites/${siteId}/collections/${resourceId}`,
+            label: metadata.title,
+          },
+        ]}
+        icon={<BiData />}
+        title={metadata.title}
+        buttons={
+          <>
             <Button
               variant="outline"
               size="md"
@@ -95,13 +70,11 @@ const CollectionResourceListPage: NextPageWithLayout = () => {
             <Button onClick={onPageCreateModalOpen} size="md">
               Add new item
             </Button>
-          </HStack>
-        </HStack>
-        <CollectionBanner />
-        <Box width="100%">
-          <CollectionTable resourceId={resourceId} siteId={siteId} />
-        </Box>
-      </Stack>
+          </>
+        }
+        banner={<CollectionBanner />}
+        table={<CollectionTable resourceId={resourceId} siteId={siteId} />}
+      />
       <CreateCollectionPageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}
diff --git a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
index 7cd195a8da..1267704e9d 100644
--- a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
+++ b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
@@ -1,16 +1,5 @@
-import NextLink from "next/link"
-import {
-  Box,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  Flex,
-  HStack,
-  Portal,
-  Text,
-  useDisclosure,
-  VStack,
-} from "@chakra-ui/react"
-import { Breadcrumb, Button, Menu } from "@opengovsg/design-system-react"
+import { Portal, useDisclosure } from "@chakra-ui/react"
+import { Button, Menu } from "@opengovsg/design-system-react"
 import { ResourceType } from "~prisma/generated/generatedEnums"
 import { useSetAtom } from "jotai"
 import { BiFileBlank, BiFolder } from "react-icons/bi"
@@ -19,6 +8,7 @@ import { z } from "zod"
 import type { RouterOutput } from "~/utils/trpc"
 import { PermissionsBoundary } from "~/components/AuthWrappers"
 import { folderSettingsModalAtom } from "~/features/dashboard/atoms"
+import { Dashboard } from "~/features/dashboard/components/Dashboard"
 import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal"
 import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal"
 import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal"
@@ -110,123 +100,65 @@ const FolderPage: NextPageWithLayout = () => {
 
   return (
     <>
-      <VStack
-        w="100%"
-        p="1.75rem"
-        gap="1rem"
-        height="0"
-        overflow="auto"
-        minH="100%"
-      >
-        <VStack w="100%" align="start">
-          <Breadcrumb size="sm" w="100%">
-            {breadcrumbs.map(({ href, label }, index) => {
-              return (
-                <BreadcrumbItem key={index}>
-                  <BreadcrumbLink href={href} as={NextLink}>
-                    <Text
-                      textStyle="caption-2"
-                      color="interaction.links.default"
-                      noOfLines={1}
-                      w="max-content"
-                    >
-                      {label}
-                    </Text>
-                  </BreadcrumbLink>
-                </BreadcrumbItem>
-              )
-            })}
-            <BreadcrumbItem
-              key={folderId}
-              overflow="hidden"
-              whiteSpace="nowrap"
+      <Dashboard
+        breadcrumbs={breadcrumbs.concat({
+          href: getFolderHref(siteId, folderId),
+          label: title,
+        })}
+        icon={<BiFolder />}
+        title={title}
+        buttons={
+          <>
+            <Button
+              variant="outline"
+              size="md"
+              onClick={() =>
+                setFolderSettingsModalState({
+                  folderId,
+                })
+              }
             >
-              <Text
-                textStyle="caption-2"
-                color="base.content.default"
-                overflow="hidden"
-                textOverflow="ellipsis"
-              >
-                {title}
-              </Text>
-            </BreadcrumbItem>
-          </Breadcrumb>
-          <Flex w="full" flexDir="row">
-            <HStack mr="1.25rem" overflow="auto" gap="0.75rem" flex={1}>
-              <Box
-                aria-hidden
-                bg="brand.secondary.100"
-                p="0.5rem"
-                borderRadius="6px"
-              >
-                <BiFolder />
-              </Box>
-              <Text
-                noOfLines={1}
-                as="h3"
-                textStyle="h3"
-                textOverflow="ellipsis"
-                wordBreak="break-all"
-              >
-                {title}
-              </Text>
-            </HStack>
-
-            <HStack>
-              <Button
-                variant="outline"
-                size="md"
-                onClick={() =>
-                  setFolderSettingsModalState({
-                    folderId,
-                  })
-                }
-              >
-                Folder settings
-              </Button>
-              <Menu isLazy size="sm">
-                {({ isOpen }) => (
-                  <>
-                    <Menu.Button
-                      isOpen={isOpen}
-                      as={Button}
-                      size="md"
-                      justifySelf="flex-end"
-                    >
-                      Create new...
-                    </Menu.Button>
-                    <Portal>
-                      <Menu.List>
-                        <Menu.Item
-                          onClick={onFolderCreateModalOpen}
-                          icon={<BiFolder fontSize="1rem" />}
-                        >
-                          Folder
-                        </Menu.Item>
-                        <Menu.Item
-                          onClick={onPageCreateModalOpen}
-                          icon={<BiFileBlank fontSize="1rem" />}
-                        >
-                          Page
-                        </Menu.Item>
-                      </Menu.List>
-                    </Portal>
-                  </>
-                )}
-              </Menu>
-            </HStack>
-          </Flex>
-          <HStack w="100%" justify="space-between" align="center" gap={0}>
-            <Box />
-          </HStack>
-        </VStack>
-        <Box width="100%">
+              Folder settings
+            </Button>
+            <Menu isLazy size="sm">
+              {({ isOpen }) => (
+                <>
+                  <Menu.Button
+                    isOpen={isOpen}
+                    as={Button}
+                    size="md"
+                    justifySelf="flex-end"
+                  >
+                    Create new...
+                  </Menu.Button>
+                  <Portal>
+                    <Menu.List>
+                      <Menu.Item
+                        onClick={onFolderCreateModalOpen}
+                        icon={<BiFolder fontSize="1rem" />}
+                      >
+                        Folder
+                      </Menu.Item>
+                      <Menu.Item
+                        onClick={onPageCreateModalOpen}
+                        icon={<BiFileBlank fontSize="1rem" />}
+                      >
+                        Page
+                      </Menu.Item>
+                    </Menu.List>
+                  </Portal>
+                </>
+              )}
+            </Menu>
+          </>
+        }
+        table={
           <ResourceTable
             siteId={parseInt(siteId)}
             resourceId={parseInt(folderId)}
           />
-        </Box>
-      </VStack>
+        }
+      />
       <CreatePageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}

From 7c297e8f9a057abb4bd1d0359a4249bc4c112cfa Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Fri, 27 Dec 2024 23:40:27 +0800
Subject: [PATCH 04/10] have homepage use same Dashboard

---
 .../dashboard/components/Dashboard.tsx        |  6 +-
 .../[siteId]/collections/[resourceId].tsx     |  2 +-
 .../studio/src/pages/sites/[siteId]/index.tsx | 73 ++++++-------------
 3 files changed, 25 insertions(+), 56 deletions(-)

diff --git a/apps/studio/src/features/dashboard/components/Dashboard.tsx b/apps/studio/src/features/dashboard/components/Dashboard.tsx
index e5310db8c9..bb0cbc64ca 100644
--- a/apps/studio/src/features/dashboard/components/Dashboard.tsx
+++ b/apps/studio/src/features/dashboard/components/Dashboard.tsx
@@ -16,7 +16,7 @@ export const Dashboard = ({
   icon,
   title,
   buttons,
-  banner,
+  preTableContent,
   table,
 }: {
   breadcrumbs: {
@@ -26,7 +26,7 @@ export const Dashboard = ({
   icon: ReactNode
   title: string
   buttons: ReactNode
-  banner?: ReactNode
+  preTableContent?: ReactNode
   table: ReactNode
 }) => {
   const allBreadcrumbsExceptLast = breadcrumbs.slice(0, -1)
@@ -96,7 +96,7 @@ export const Dashboard = ({
           <HStack>{buttons}</HStack>
         </Flex>
       </VStack>
-      {banner && banner}
+      {preTableContent && preTableContent}
       <Box width="100%">{table}</Box>
     </VStack>
   )
diff --git a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
index e44661bbf3..4b6b43d897 100644
--- a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
+++ b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
@@ -72,7 +72,7 @@ const CollectionResourceListPage: NextPageWithLayout = () => {
             </Button>
           </>
         }
-        banner={<CollectionBanner />}
+        preTableContent={<CollectionBanner />}
         table={<CollectionTable resourceId={resourceId} siteId={siteId} />}
       />
       <CreateCollectionPageModal
diff --git a/apps/studio/src/pages/sites/[siteId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/index.tsx
index 2a9fc9dbfb..b9ce3e8f2e 100644
--- a/apps/studio/src/pages/sites/[siteId]/index.tsx
+++ b/apps/studio/src/pages/sites/[siteId]/index.tsx
@@ -1,19 +1,11 @@
-import {
-  Box,
-  Breadcrumb,
-  BreadcrumbItem,
-  HStack,
-  Portal,
-  Text,
-  useDisclosure,
-  VStack,
-} from "@chakra-ui/react"
+import { Portal, useDisclosure } from "@chakra-ui/react"
 import { Button, Menu } from "@opengovsg/design-system-react"
 import { ResourceType } from "~prisma/generated/generatedEnums"
 import { BiData, BiFileBlank, BiFolder, BiHomeAlt } from "react-icons/bi"
 import { z } from "zod"
 
 import { PermissionsBoundary } from "~/components/AuthWrappers"
+import { Dashboard } from "~/features/dashboard/components/Dashboard"
 import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal"
 import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal"
 import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal"
@@ -105,48 +97,25 @@ const SitePage: NextPageWithLayout = () => {
 
   return (
     <>
-      <VStack
-        w="100%"
-        p="1.75rem"
-        gap="1rem"
-        height={0}
-        minH="100%"
-        overflow="auto"
-      >
-        <VStack w="100%" align="start">
-          <Breadcrumb size="sm">
-            <BreadcrumbItem>
-              <Text textStyle="caption-2" color="base.content.default">
-                Home
-              </Text>
-            </BreadcrumbItem>
-          </Breadcrumb>
-          <HStack w="100%" justify="space-between" align="center" gap={0}>
-            <HStack gap="0.75rem">
-              <Box
-                aria-hidden
-                bg="brand.secondary.100"
-                p="0.5rem"
-                borderRadius="6px"
-              >
-                <BiHomeAlt />
-              </Box>
-              <Text as="h3" textStyle="h3">
-                Home
-              </Text>
-            </HStack>
-            <HomepageMenuButton
-              onPageCreateModalOpen={onPageCreateModalOpen}
-              onFolderCreateModalOpen={onFolderCreateModalOpen}
-              onCollectionCreateModalOpen={onCollectionCreateModalOpen}
-            />
-          </HStack>
-        </VStack>
-        <RootpageRow siteId={siteId} />
-        <Box width="100%">
-          <ResourceTable siteId={siteId} />
-        </Box>
-      </VStack>
+      <Dashboard
+        breadcrumbs={[
+          {
+            href: `/sites/${siteId}`,
+            label: "Home",
+          },
+        ]}
+        icon={<BiHomeAlt />}
+        title="Home"
+        buttons={
+          <HomepageMenuButton
+            onPageCreateModalOpen={onPageCreateModalOpen}
+            onFolderCreateModalOpen={onFolderCreateModalOpen}
+            onCollectionCreateModalOpen={onCollectionCreateModalOpen}
+          />
+        }
+        preTableContent={<RootpageRow siteId={siteId} />}
+        table={<ResourceTable siteId={siteId} />}
+      />
       <CreatePageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}

From b5968746a47a3f8cff5e478de479ce0e3da14d84 Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Fri, 27 Dec 2024 23:45:04 +0800
Subject: [PATCH 05/10] ensure breadcrumb always same height

---
 .../src/features/dashboard/components/Dashboard.tsx       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/studio/src/features/dashboard/components/Dashboard.tsx b/apps/studio/src/features/dashboard/components/Dashboard.tsx
index bb0cbc64ca..a7d3acefa5 100644
--- a/apps/studio/src/features/dashboard/components/Dashboard.tsx
+++ b/apps/studio/src/features/dashboard/components/Dashboard.tsx
@@ -41,7 +41,13 @@ export const Dashboard = ({
       minH="100%"
     >
       <VStack w="100%" align="start">
-        <Breadcrumb size="sm" w="100%">
+        <Breadcrumb
+          size="sm"
+          w="100%"
+          minH="1.25rem" // maintain height even when single breadcrumb
+          display="flex"
+          alignItems="center"
+        >
           {allBreadcrumbsExceptLast.map(({ href, label }, index) => {
             return (
               <BreadcrumbItem key={index}>

From 1b37efec580622945fbc5960371546f14578ab0c Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Sun, 29 Dec 2024 18:25:31 +0800
Subject: [PATCH 06/10] undo auto overflow

---
 apps/studio/src/components/CmsSidebar/CmsContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/studio/src/components/CmsSidebar/CmsContainer.tsx b/apps/studio/src/components/CmsSidebar/CmsContainer.tsx
index fb8041f800..93fbf9fa2b 100644
--- a/apps/studio/src/components/CmsSidebar/CmsContainer.tsx
+++ b/apps/studio/src/components/CmsSidebar/CmsContainer.tsx
@@ -75,7 +75,7 @@ export function CmsContainer({
           {sidenav}
         </Box>
       </GridItem>
-      <GridItem as="main" area="main" overflow="auto">
+      <GridItem as="main" area="main" overflow="hidden">
         <Box
           height={0}
           minH="100%"

From 6f75f773bb8edb0c29cef75f562ba67842114ea8 Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Mon, 13 Jan 2025 16:26:45 +0800
Subject: [PATCH 07/10] make table as a children instead

---
 .../src/features/dashboard/components/Dashboard.tsx |  6 +++---
 .../sites/[siteId]/collections/[resourceId].tsx     |  5 +++--
 .../sites/[siteId]/folders/[folderId]/index.tsx     | 13 ++++++-------
 apps/studio/src/pages/sites/[siteId]/index.tsx      |  5 +++--
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/apps/studio/src/features/dashboard/components/Dashboard.tsx b/apps/studio/src/features/dashboard/components/Dashboard.tsx
index a7d3acefa5..99d12d2565 100644
--- a/apps/studio/src/features/dashboard/components/Dashboard.tsx
+++ b/apps/studio/src/features/dashboard/components/Dashboard.tsx
@@ -17,7 +17,7 @@ export const Dashboard = ({
   title,
   buttons,
   preTableContent,
-  table,
+  children,
 }: {
   breadcrumbs: {
     href: string
@@ -27,7 +27,7 @@ export const Dashboard = ({
   title: string
   buttons: ReactNode
   preTableContent?: ReactNode
-  table: ReactNode
+  children: ReactNode
 }) => {
   const allBreadcrumbsExceptLast = breadcrumbs.slice(0, -1)
   const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1]
@@ -103,7 +103,7 @@ export const Dashboard = ({
         </Flex>
       </VStack>
       {preTableContent && preTableContent}
-      <Box width="100%">{table}</Box>
+      <Box width="100%">{children}</Box>
     </VStack>
   )
 }
diff --git a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
index 4b6b43d897..f6c03aab3a 100644
--- a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
+++ b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
@@ -73,8 +73,9 @@ const CollectionResourceListPage: NextPageWithLayout = () => {
           </>
         }
         preTableContent={<CollectionBanner />}
-        table={<CollectionTable resourceId={resourceId} siteId={siteId} />}
-      />
+      >
+        <CollectionTable resourceId={resourceId} siteId={siteId} />
+      </Dashboard>
       <CreateCollectionPageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}
diff --git a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
index 1267704e9d..de97a2d22d 100644
--- a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
+++ b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
@@ -152,13 +152,12 @@ const FolderPage: NextPageWithLayout = () => {
             </Menu>
           </>
         }
-        table={
-          <ResourceTable
-            siteId={parseInt(siteId)}
-            resourceId={parseInt(folderId)}
-          />
-        }
-      />
+      >
+        <ResourceTable
+          siteId={parseInt(siteId)}
+          resourceId={parseInt(folderId)}
+        />
+      </Dashboard>
       <CreatePageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}
diff --git a/apps/studio/src/pages/sites/[siteId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/index.tsx
index b9ce3e8f2e..62c057554a 100644
--- a/apps/studio/src/pages/sites/[siteId]/index.tsx
+++ b/apps/studio/src/pages/sites/[siteId]/index.tsx
@@ -114,8 +114,9 @@ const SitePage: NextPageWithLayout = () => {
           />
         }
         preTableContent={<RootpageRow siteId={siteId} />}
-        table={<ResourceTable siteId={siteId} />}
-      />
+      >
+        <ResourceTable siteId={siteId} />
+      </Dashboard>
       <CreatePageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}

From 440058c659bdb883f986d3663e703d0631afe11f Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Mon, 13 Jan 2025 16:28:39 +0800
Subject: [PATCH 08/10] rename to DashboardLayout for improved readability

---
 .../components/{Dashboard.tsx => DashboardLayout.tsx}       | 2 +-
 .../src/pages/sites/[siteId]/collections/[resourceId].tsx   | 6 +++---
 .../src/pages/sites/[siteId]/folders/[folderId]/index.tsx   | 6 +++---
 apps/studio/src/pages/sites/[siteId]/index.tsx              | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)
 rename apps/studio/src/features/dashboard/components/{Dashboard.tsx => DashboardLayout.tsx} (98%)

diff --git a/apps/studio/src/features/dashboard/components/Dashboard.tsx b/apps/studio/src/features/dashboard/components/DashboardLayout.tsx
similarity index 98%
rename from apps/studio/src/features/dashboard/components/Dashboard.tsx
rename to apps/studio/src/features/dashboard/components/DashboardLayout.tsx
index 99d12d2565..bd19d73497 100644
--- a/apps/studio/src/features/dashboard/components/Dashboard.tsx
+++ b/apps/studio/src/features/dashboard/components/DashboardLayout.tsx
@@ -11,7 +11,7 @@ import {
 } from "@chakra-ui/react"
 import { Breadcrumb } from "@opengovsg/design-system-react"
 
-export const Dashboard = ({
+export const DashboardLayout = ({
   breadcrumbs,
   icon,
   title,
diff --git a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
index f6c03aab3a..cd484742bb 100644
--- a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
+++ b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
@@ -8,7 +8,7 @@ import { PermissionsBoundary } from "~/components/AuthWrappers"
 import { folderSettingsModalAtom } from "~/features/dashboard/atoms"
 import { CollectionBanner } from "~/features/dashboard/components/CollectionBanner"
 import { CollectionTable } from "~/features/dashboard/components/CollectionTable"
-import { Dashboard } from "~/features/dashboard/components/Dashboard"
+import { DashboardLayout } from "~/features/dashboard/components/DashboardLayout"
 import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal"
 import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal"
 import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal"
@@ -41,7 +41,7 @@ const CollectionResourceListPage: NextPageWithLayout = () => {
 
   return (
     <>
-      <Dashboard
+      <DashboardLayout
         breadcrumbs={[
           {
             href: `/sites/${siteId}`,
@@ -75,7 +75,7 @@ const CollectionResourceListPage: NextPageWithLayout = () => {
         preTableContent={<CollectionBanner />}
       >
         <CollectionTable resourceId={resourceId} siteId={siteId} />
-      </Dashboard>
+      </DashboardLayout>
       <CreateCollectionPageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}
diff --git a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
index de97a2d22d..96b9a4e264 100644
--- a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
+++ b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
@@ -8,7 +8,7 @@ import { z } from "zod"
 import type { RouterOutput } from "~/utils/trpc"
 import { PermissionsBoundary } from "~/components/AuthWrappers"
 import { folderSettingsModalAtom } from "~/features/dashboard/atoms"
-import { Dashboard } from "~/features/dashboard/components/Dashboard"
+import { DashboardLayout } from "~/features/dashboard/components/DashboardLayout"
 import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal"
 import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal"
 import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal"
@@ -100,7 +100,7 @@ const FolderPage: NextPageWithLayout = () => {
 
   return (
     <>
-      <Dashboard
+      <DashboardLayout
         breadcrumbs={breadcrumbs.concat({
           href: getFolderHref(siteId, folderId),
           label: title,
@@ -157,7 +157,7 @@ const FolderPage: NextPageWithLayout = () => {
           siteId={parseInt(siteId)}
           resourceId={parseInt(folderId)}
         />
-      </Dashboard>
+      </DashboardLayout>
       <CreatePageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}
diff --git a/apps/studio/src/pages/sites/[siteId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/index.tsx
index 62c057554a..65f399d843 100644
--- a/apps/studio/src/pages/sites/[siteId]/index.tsx
+++ b/apps/studio/src/pages/sites/[siteId]/index.tsx
@@ -5,7 +5,7 @@ import { BiData, BiFileBlank, BiFolder, BiHomeAlt } from "react-icons/bi"
 import { z } from "zod"
 
 import { PermissionsBoundary } from "~/components/AuthWrappers"
-import { Dashboard } from "~/features/dashboard/components/Dashboard"
+import { DashboardLayout } from "~/features/dashboard/components/DashboardLayout"
 import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal"
 import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal"
 import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal"
@@ -97,7 +97,7 @@ const SitePage: NextPageWithLayout = () => {
 
   return (
     <>
-      <Dashboard
+      <DashboardLayout
         breadcrumbs={[
           {
             href: `/sites/${siteId}`,
@@ -116,7 +116,7 @@ const SitePage: NextPageWithLayout = () => {
         preTableContent={<RootpageRow siteId={siteId} />}
       >
         <ResourceTable siteId={siteId} />
-      </Dashboard>
+      </DashboardLayout>
       <CreatePageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}

From 60fe9f88a252a98eb130509fe39b68d79f007f4e Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Thu, 16 Jan 2025 14:23:09 +0800
Subject: [PATCH 09/10] move width=100% to datatable

---
 apps/studio/src/components/Datatable/Datatable.tsx         | 7 ++++++-
 .../src/features/dashboard/components/DashboardLayout.tsx  | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/studio/src/components/Datatable/Datatable.tsx b/apps/studio/src/components/Datatable/Datatable.tsx
index ff63c4d4ad..129c281236 100644
--- a/apps/studio/src/components/Datatable/Datatable.tsx
+++ b/apps/studio/src/components/Datatable/Datatable.tsx
@@ -48,7 +48,12 @@ export const Datatable = <T extends object>({
   const styles = useMultiStyleConfig("Table", tableProps)
 
   return (
-    <Flex flexDirection="column" layerStyle="shadow" pos="relative">
+    <Flex
+      width="100%"
+      flexDirection="column"
+      layerStyle="shadow"
+      pos="relative"
+    >
       {isFetching && (
         <>
           <Flex
diff --git a/apps/studio/src/features/dashboard/components/DashboardLayout.tsx b/apps/studio/src/features/dashboard/components/DashboardLayout.tsx
index bd19d73497..f20a07acd9 100644
--- a/apps/studio/src/features/dashboard/components/DashboardLayout.tsx
+++ b/apps/studio/src/features/dashboard/components/DashboardLayout.tsx
@@ -103,7 +103,7 @@ export const DashboardLayout = ({
         </Flex>
       </VStack>
       {preTableContent && preTableContent}
-      <Box width="100%">{children}</Box>
+      {children}
     </VStack>
   )
 }

From 9ef37cb02d876a9c7fd2b29b3dea664fb8a0b3e8 Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Thu, 16 Jan 2025 14:27:47 +0800
Subject: [PATCH 10/10] remove preTableContent

---
 .../src/features/dashboard/components/DashboardLayout.tsx      | 3 ---
 .../src/pages/sites/[siteId]/collections/[resourceId].tsx      | 2 +-
 apps/studio/src/pages/sites/[siteId]/index.tsx                 | 2 +-
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/apps/studio/src/features/dashboard/components/DashboardLayout.tsx b/apps/studio/src/features/dashboard/components/DashboardLayout.tsx
index f20a07acd9..4559eba917 100644
--- a/apps/studio/src/features/dashboard/components/DashboardLayout.tsx
+++ b/apps/studio/src/features/dashboard/components/DashboardLayout.tsx
@@ -16,7 +16,6 @@ export const DashboardLayout = ({
   icon,
   title,
   buttons,
-  preTableContent,
   children,
 }: {
   breadcrumbs: {
@@ -26,7 +25,6 @@ export const DashboardLayout = ({
   icon: ReactNode
   title: string
   buttons: ReactNode
-  preTableContent?: ReactNode
   children: ReactNode
 }) => {
   const allBreadcrumbsExceptLast = breadcrumbs.slice(0, -1)
@@ -102,7 +100,6 @@ export const DashboardLayout = ({
           <HStack>{buttons}</HStack>
         </Flex>
       </VStack>
-      {preTableContent && preTableContent}
       {children}
     </VStack>
   )
diff --git a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
index cd484742bb..aa22afa6d3 100644
--- a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
+++ b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
@@ -72,8 +72,8 @@ const CollectionResourceListPage: NextPageWithLayout = () => {
             </Button>
           </>
         }
-        preTableContent={<CollectionBanner />}
       >
+        <CollectionBanner />
         <CollectionTable resourceId={resourceId} siteId={siteId} />
       </DashboardLayout>
       <CreateCollectionPageModal
diff --git a/apps/studio/src/pages/sites/[siteId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/index.tsx
index 65f399d843..9c86456393 100644
--- a/apps/studio/src/pages/sites/[siteId]/index.tsx
+++ b/apps/studio/src/pages/sites/[siteId]/index.tsx
@@ -113,8 +113,8 @@ const SitePage: NextPageWithLayout = () => {
             onCollectionCreateModalOpen={onCollectionCreateModalOpen}
           />
         }
-        preTableContent={<RootpageRow siteId={siteId} />}
       >
+        <RootpageRow siteId={siteId} />
         <ResourceTable siteId={siteId} />
       </DashboardLayout>
       <CreatePageModal