Fix inconsistent studio dashboard layout

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%"

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

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"

apps/studio/src/features/dashboard/components/DashboardLayout.tsx

@@ -0,0 +1,106 @@
+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 DashboardLayout = ({
+  breadcrumbs,
+  icon,
+  title,
+  buttons,
+  children,
+}: {
+  breadcrumbs: {
+    href: string
+    label: string
+  }[]
+  icon: ReactNode
+  title: string
+  buttons: ReactNode
+  children: 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%"
+          minH="1.25rem" // maintain height even when single breadcrumb
+          display="flex"
+          alignItems="center"
+        >
+          {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>
+      {children}
+    </VStack>
+  )
+}

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 { 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"
@@ -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">
+      <DashboardLayout
+        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,12 @@ 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>
+        <CollectionTable resourceId={resourceId} siteId={siteId} />
+      </DashboardLayout>
       <CreateCollectionPageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}