diff --git a/src/components/ActionDataSamplesCard.tsx b/src/components/ActionDataSamplesCard.tsx
index fb6d74e65..d92ec41a2 100644
--- a/src/components/ActionDataSamplesCard.tsx
+++ b/src/components/ActionDataSamplesCard.tsx
@@ -21,7 +21,7 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
-import { ReactNode, useCallback } from "react";
+import { forwardRef, ReactNode, useCallback, useRef } from "react";
 import { RiHashtag, RiTimerLine } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { DataSamplesView, ActionData, RecordingData } from "../model";
@@ -81,32 +81,33 @@ const ActionDataSamplesCard = ({
           </DataSamplesRowCard>
         )}
         {value.recordings.map((recording, idx) => (
-          <DataSamplesRowCard
+          <GraphAndDataFeaturesDataSampleCard
             onSelectRow={onSelectRow}
             selected={selected}
             key={recording.id}
+            closeButton={
+              <CloseButton
+                aria-label={intl.formatMessage(
+                  {
+                    id: "delete-recording-aria",
+                  },
+                  {
+                    sample: value.recordings.length - idx,
+                    numSamples: value.recordings.length,
+                    action: value.name,
+                  }
+                )}
+                position="absolute"
+                top={-2}
+                right={-2}
+                rounded="full"
+                bgColor="white"
+                borderColor="blackAlpha.500"
+                boxShadow="sm"
+                onClick={() => deleteActionRecording(value.id, recording.id)}
+              />
+            }
           >
-            <CloseButton
-              aria-label={intl.formatMessage(
-                {
-                  id: "delete-recording-aria",
-                },
-                {
-                  sample: value.recordings.length - idx,
-                  numSamples: value.recordings.length,
-                  action: value.name,
-                }
-              )}
-              position="absolute"
-              top={-2}
-              right={-2}
-              rounded="full"
-              bgColor="white"
-              zIndex={1}
-              borderColor="blackAlpha.500"
-              boxShadow="sm"
-              onClick={() => deleteActionRecording(value.id, recording.id)}
-            />
             <DataSample
               recording={recording}
               numRecordings={value.recordings.length}
@@ -119,7 +120,7 @@ const ActionDataSamplesCard = ({
               view={view}
               hasClose={false}
             />
-          </DataSamplesRowCard>
+          </GraphAndDataFeaturesDataSampleCard>
         ))}
       </HStack>
     );
@@ -163,37 +164,58 @@ const ActionDataSamplesCard = ({
   );
 };
 
-interface DataSamplesRowCardProps extends CardProps {
-  selected: boolean;
-  onSelectRow?: () => void;
+interface GraphAndDataFeaturesDataSampleCardProps
+  extends DataSamplesRowCardProps {
   children: ReactNode;
+  closeButton: ReactNode;
 }
 
-const DataSamplesRowCard = ({
-  selected,
-  onSelectRow,
+const GraphAndDataFeaturesDataSampleCard = ({
   children,
-  ...rest
-}: DataSamplesRowCardProps) => {
+  closeButton,
+  ...props
+}: GraphAndDataFeaturesDataSampleCardProps) => {
+  const ref = useRef<HTMLDivElement>(null);
   return (
-    <Card
-      onClick={onSelectRow}
-      p={2}
-      h="120px"
-      display="flex"
-      flexDirection="row"
-      width="fit-content"
-      borderColor={selected ? "brand.500" : "transparent"}
-      borderWidth={1}
-      {...rest}
-    >
-      <CardBody display="flex" flexDirection="row" p={1} gap={3}>
-        {children}
-      </CardBody>
-    </Card>
+    <DataSamplesRowCard {...props} ref={ref}>
+      <Portal containerRef={ref}>{closeButton}</Portal>
+      {children}
+    </DataSamplesRowCard>
   );
 };
 
+interface DataSamplesRowCardProps extends CardProps {
+  selected: boolean;
+  onSelectRow?: () => void;
+  children: ReactNode;
+}
+
+const DataSamplesRowCard = forwardRef<HTMLDivElement, DataSamplesRowCardProps>(
+  function DataSamplesRowCard(
+    { selected, onSelectRow, children, ...rest }: DataSamplesRowCardProps,
+    ref
+  ) {
+    return (
+      <Card
+        ref={ref}
+        onClick={onSelectRow}
+        p={2}
+        h="120px"
+        display="flex"
+        flexDirection="row"
+        width="fit-content"
+        borderColor={selected ? "brand.500" : "transparent"}
+        borderWidth={1}
+        {...rest}
+      >
+        <CardBody display="flex" flexDirection="row" p={1} gap={3}>
+          {children}
+        </CardBody>
+      </Card>
+    );
+  }
+);
+
 interface RecordingAreaProps extends BoxProps {
   action: ActionData;
   selected: boolean;
@@ -328,6 +350,7 @@ const DataSample = ({
   view: DataSamplesView;
   hasClose?: boolean;
 }) => {
+  const ref = useRef<HTMLDivElement>(null);
   const hasGraph =
     view === DataSamplesView.Graph ||
     view === DataSamplesView.GraphAndDataFeatures;
@@ -339,26 +362,27 @@ const DataSample = ({
     onDelete(actionId, recording.id);
   }, [actionId, onDelete, recording.id]);
   return (
-    <HStack key={recording.id} position="relative">
+    <HStack key={recording.id} position="relative" ref={ref}>
       {hasClose && (
-        <CloseButton
-          position="absolute"
-          top={0}
-          right={0}
-          zIndex={1}
-          size="sm"
-          aria-label={intl.formatMessage(
-            {
-              id: "delete-recording-aria",
-            },
-            {
-              sample: numRecordings - recordingIndex,
-              numSamples: numRecordings,
-              action: actionName,
-            }
-          )}
-          onClick={handleDelete}
-        />
+        <Portal containerRef={ref}>
+          <CloseButton
+            position="absolute"
+            top={0}
+            right={2}
+            size="sm"
+            aria-label={intl.formatMessage(
+              {
+                id: "delete-recording-aria",
+              },
+              {
+                sample: numRecordings - recordingIndex,
+                numSamples: numRecordings,
+                action: actionName,
+              }
+            )}
+            onClick={handleDelete}
+          />
+        </Portal>
       )}
       {hasGraph && (
         <RecordingGraph
diff --git a/src/components/CodeViewCard.tsx b/src/components/CodeViewCard.tsx
index c1b529b97..1ae40ae09 100644
--- a/src/components/CodeViewCard.tsx
+++ b/src/components/CodeViewCard.tsx
@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, Card, SkeletonText, VStack } from "@chakra-ui/react";
+import { Box, Card, CardProps, SkeletonText, VStack } from "@chakra-ui/react";
 import {
   BlockLayout,
   MakeCodeBlocksRendering,
@@ -12,12 +12,12 @@ import {
 import { memo, useLayoutEffect, useRef, useState } from "react";
 import { tourElClassname } from "../tours";
 
-interface CodeViewCardProps {
+interface CodeViewCardProps extends CardProps {
   project: MakeCodeProject;
   parentRef: React.RefObject<HTMLDivElement>;
 }
 
-const CodeViewCard = ({ project, parentRef }: CodeViewCardProps) => {
+const CodeViewCard = ({ project, parentRef, ...props }: CodeViewCardProps) => {
   // This is used to set the tour cutout as the card can be taller than
   // the parent in a scrollable area.
   const [observableHeight, setObservableHeight] = useState<number | string>(
@@ -54,7 +54,6 @@ const CodeViewCard = ({ project, parentRef }: CodeViewCardProps) => {
       alignSelf="start"
       display="flex"
       flexDirection="column"
-      py={2}
       h="full"
       w="full"
       borderColor="brand.500"
@@ -67,6 +66,7 @@ const CodeViewCard = ({ project, parentRef }: CodeViewCardProps) => {
         p={5}
         objectFit="contain"
         position="relative"
+        {...props}
       >
         <Box
           position="absolute"
diff --git a/src/components/CodeViewDefaultBlockCard.tsx b/src/components/CodeViewDefaultBlockCard.tsx
index 41a971769..cb13a8525 100644
--- a/src/components/CodeViewDefaultBlockCard.tsx
+++ b/src/components/CodeViewDefaultBlockCard.tsx
@@ -3,18 +3,19 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Card } from "@chakra-ui/react";
+import { Card, CardProps } from "@chakra-ui/react";
 import { memo } from "react";
 import { ActionData } from "../model";
 import { tourElClassname } from "../tours";
 import CodeViewDefaultBlock from "./CodeViewDefaultBlock";
 
-interface CodeViewDefaultBlockCardProps {
+interface CodeViewDefaultBlockCardProps extends CardProps {
   action: ActionData;
 }
 
 const CodeViewDefaultBlockCard = ({
   action,
+  ...props
 }: CodeViewDefaultBlockCardProps) => {
   return (
     <Card
@@ -22,10 +23,10 @@ const CodeViewDefaultBlockCard = ({
       h="120px"
       display="flex"
       borderColor="brand.500"
-      minW="400px"
       width="fit-content"
       justifyContent="center"
       className={tourElClassname.makeCodeCodeView}
+      {...props}
     >
       <CodeViewDefaultBlock actionName={action.name} icon={action.icon} />
     </Card>
diff --git a/src/components/DataSamplesTable.tsx b/src/components/DataSamplesTable.tsx
index 2fc95fc40..8eee04edb 100644
--- a/src/components/DataSamplesTable.tsx
+++ b/src/components/DataSamplesTable.tsx
@@ -36,15 +36,12 @@ const gridCommonProps: Partial<GridProps> = {
 };
 
 const headings: GridColumnHeadingItemProps[] = [
-  {
-    titleId: "action-label",
-    descriptionId: "action-tooltip",
-  },
+  { titleId: "action-label", descriptionId: "action-tooltip" },
   {
     titleId: "data-samples-label",
     descriptionId: "data-samples-tooltip",
     itemsRight: (
-      <HStack>
+      <HStack position="sticky" right={0} backgroundColor="whitesmoke" pl={2}>
         <ShowGraphsCheckbox />
         <DataSamplesMenu />
       </HStack>
@@ -245,10 +242,9 @@ const DataSamplesTable = ({
         </>
       )}
       <HeadingGrid
-        position="sticky"
-        top={0}
         {...gridCommonProps}
         headings={headings}
+        w={gridRef.current?.clientWidth}
       />
       <Grid
         {...gridCommonProps}
@@ -256,7 +252,6 @@ const DataSamplesTable = ({
         pb={gridPadding > 0 ? `${gridPadding}px` : 2}
         alignItems="start"
         autoRows="max-content"
-        overflow="auto"
         flexGrow={1}
         h={0}
         ref={(node) => {
diff --git a/src/components/HeadingGrid.tsx b/src/components/HeadingGrid.tsx
index 8e5d6d092..e348b0600 100644
--- a/src/components/HeadingGrid.tsx
+++ b/src/components/HeadingGrid.tsx
@@ -11,15 +11,18 @@ import { ReactNode } from "react";
 interface HeadingGridProps extends GridProps {
   headings: GridColumnHeadingItemProps[];
 }
-
 const HeadingGrid = ({ headings, ...props }: HeadingGridProps) => {
   return (
     <Grid
       flexShrink={0}
-      h="3.25rem"
       alignItems="center"
+      position="sticky"
+      top={0}
+      height="3.25rem"
       borderBottomWidth={3}
       borderColor="gray.200"
+      zIndex={1}
+      backgroundColor="whitesmoke"
       {...props}
     >
       {headings.map((props, idx) => (
diff --git a/src/components/TestingModelTable.tsx b/src/components/TestingModelTable.tsx
index e8bc39838..a96981df4 100644
--- a/src/components/TestingModelTable.tsx
+++ b/src/components/TestingModelTable.tsx
@@ -6,15 +6,15 @@
  */
 import {
   Box,
+  Flex,
   Grid,
   GridItem,
   GridProps,
-  HStack,
   Icon,
   VStack,
 } from "@chakra-ui/react";
 import { MakeCodeRenderBlocksProvider } from "@microbit/makecode-embed/react";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { RiArrowRightLine } from "react-icons/ri";
 import { useIntl } from "react-intl";
 import { useDataConnected } from "../data-connection-flow";
@@ -28,9 +28,12 @@ import CodeViewCard from "./CodeViewCard";
 import CodeViewDefaultBlockCard from "./CodeViewDefaultBlockCard";
 import HeadingGrid from "./HeadingGrid";
 
+const blockCardMinWidth = "400px";
+const gap = 3;
+
 const gridCommonProps: Partial<GridProps> = {
-  gridTemplateColumns: "290px 360px 40px auto",
-  gap: 3,
+  gridTemplateColumns: `290px 360px 40px minmax(${blockCardMinWidth}, 1fr)`,
+  gap,
   w: "100%",
 };
 
@@ -58,82 +61,129 @@ const TestingModelTable = () => {
   const isConnected = useDataConnected();
   const [{ languageId }] = useSettings();
   const makeCodeLang = getMakeCodeLang(languageId);
-  const scrollableAreaRef = useRef<HTMLDivElement>(null);
+  const gridAreaRef = useRef<HTMLDivElement>(null);
   const intl = useIntl();
+
+  const scrollableAreaRef = useRef<HTMLDivElement>(null);
+  const [scrollbarWidth, setScrollbarWidth] = useState<number>(0);
+  useEffect(() => {
+    const scrollEl = scrollableAreaRef.current;
+    if (!scrollEl) {
+      return;
+    }
+    const measure = () => {
+      const hasScrollbar = scrollEl.scrollHeight > scrollEl.clientHeight;
+      const scrollbarWidth = scrollEl.offsetWidth - scrollEl.clientWidth;
+      setScrollbarWidth(hasScrollbar ? scrollbarWidth : 0);
+    };
+
+    measure(); // run on mount.
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, []);
+
   return (
     <MakeCodeRenderBlocksProvider key={makeCodeLang} lang={makeCodeLang}>
-      <HeadingGrid {...gridCommonProps} px={5} headings={headings} />
-      <VStack
-        px={5}
-        w="full"
-        h={0}
-        justifyContent="start"
+      <Flex
         flexGrow={1}
-        alignItems="start"
+        flexDir="column"
         overflow="auto"
-        flexShrink={1}
         ref={scrollableAreaRef}
       >
-        <HStack gap={0} h="min-content" w="full">
-          <Grid
-            {...gridCommonProps}
-            {...(projectEdited ? { w: "fit-content", pr: 0 } : {})}
-            py={2}
-            autoRows="max-content"
-            h="fit-content"
-            alignSelf="start"
+        <Flex flexGrow={1} flexDir="column" w="max-content">
+          <HeadingGrid {...gridCommonProps} px={5} headings={headings} />
+          <VStack
+            w={`calc(100vw - ${scrollbarWidth}px)`}
+            h={0}
+            justifyContent="start"
+            flexGrow={1}
+            alignItems="start"
+            flexShrink={1}
+            ref={gridAreaRef}
           >
-            {actions.map((action) => {
-              const { requiredConfidence: threshold } = action;
-              return (
-                <Box
-                  key={action.id}
-                  role="region"
-                  aria-label={intl.formatMessage(
-                    {
-                      id: "action-region",
-                    },
-                    { action: action.name }
-                  )}
-                  display="contents"
-                >
-                  <GridItem>
-                    <ActionNameCard
-                      value={action}
-                      viewMode={ActionCardNameViewMode.ReadOnly}
-                      disabled={!isConnected}
-                    />
-                  </GridItem>
-                  <GridItem>
-                    <ActionCertaintyCard
-                      actionName={action.name}
-                      actionId={action.id}
-                      onThresholdChange={(val) =>
-                        setRequiredConfidence(action.id, val)
-                      }
-                      requiredConfidence={
-                        threshold ?? mlSettings.defaultRequiredConfidence
-                      }
-                      disabled={!isConnected}
-                    />
-                  </GridItem>
-                  <VStack justifyContent="center" h="full">
-                    <Icon as={RiArrowRightLine} boxSize={10} color="gray.600" />
-                  </VStack>
-                  <GridItem>
+            <Grid
+              {...gridCommonProps}
+              py={2}
+              px={5}
+              autoRows="max-content"
+              h="fit-content"
+              alignSelf="start"
+            >
+              {actions.map((action, actionIdx) => {
+                const { requiredConfidence: threshold } = action;
+                return (
+                  <Box
+                    key={action.id}
+                    role="region"
+                    aria-label={intl.formatMessage(
+                      {
+                        id: "action-region",
+                      },
+                      { action: action.name }
+                    )}
+                    display="contents"
+                  >
+                    <GridItem>
+                      <ActionNameCard
+                        value={action}
+                        viewMode={ActionCardNameViewMode.ReadOnly}
+                        disabled={!isConnected}
+                      />
+                    </GridItem>
+                    <GridItem>
+                      <ActionCertaintyCard
+                        actionName={action.name}
+                        actionId={action.id}
+                        onThresholdChange={(val) =>
+                          setRequiredConfidence(action.id, val)
+                        }
+                        requiredConfidence={
+                          threshold ?? mlSettings.defaultRequiredConfidence
+                        }
+                        disabled={!isConnected}
+                      />
+                    </GridItem>
+                    <VStack justifyContent="center" h="full">
+                      <Icon
+                        as={RiArrowRightLine}
+                        boxSize={10}
+                        color="gray.600"
+                      />
+                    </VStack>
                     {!projectEdited && (
-                      <CodeViewDefaultBlockCard action={action} />
+                      <GridItem position="relative">
+                        <CodeViewDefaultBlockCard
+                          action={action}
+                          minW={blockCardMinWidth}
+                          position="absolute"
+                        />
+                      </GridItem>
+                    )}
+
+                    {projectEdited && actionIdx === 0 && (
+                      <GridItem
+                        // Extra row to extend beyond the grid.
+                        rowSpan={actions.length + 1}
+                        minW={0}
+                        h="100%"
+                        maxW="100%"
+                        position="relative"
+                      >
+                        <CodeViewCard
+                          parentRef={gridAreaRef}
+                          project={project}
+                          // To remove extra gap for extra row.
+                          mb={gap}
+                        />
+                      </GridItem>
                     )}
-                  </GridItem>
-                </Box>
-              );
-            })}
-          </Grid>
-          {projectEdited && (
-            <CodeViewCard parentRef={scrollableAreaRef} project={project} />
-          )}
-        </HStack>
-      </VStack>
+                  </Box>
+                );
+              })}
+            </Grid>
+          </VStack>
+        </Flex>
+      </Flex>
     </MakeCodeRenderBlocksProvider>
   );
 };
diff --git a/src/pages/DataSamplesPage.tsx b/src/pages/DataSamplesPage.tsx
index ec9de390f..482bf75dd 100644
--- a/src/pages/DataSamplesPage.tsx
+++ b/src/pages/DataSamplesPage.tsx
@@ -288,7 +288,13 @@ const DataSamplesPage = () => {
         }
         backLabelId="home-action"
       >
-        <Flex as="main" flexGrow={1} flexDir="column" ref={pageRef}>
+        <Flex
+          as="main"
+          flexGrow={1}
+          flexDir="column"
+          ref={pageRef}
+          w="max-content"
+        >
           <DataSamplesTable
             selectedActionIdx={selectedActionIdx}
             setSelectedActionIdx={setSelectedActionIdx}