Adapt data samples and testing model grid for narrow screens

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

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"

src/components/CodeViewDefaultBlockCard.tsx

@@ -3,29 +3,30 @@
  *
  * 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
       px={5}
       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>

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,18 +242,16 @@ const DataSamplesTable = ({
         </>
       )}
       <HeadingGrid
-        position="sticky"
-        top={0}
         {...gridCommonProps}
         headings={headings}
+        w={gridRef.current?.clientWidth}
       />
       <Grid
         {...gridCommonProps}
         py={2}
         pb={gridPadding > 0 ? `${gridPadding}px` : 2}
         alignItems="start"
         autoRows="max-content"
-        overflow="auto"
         flexGrow={1}
         h={0}
         ref={(node) => {

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) => (