#257 Tweak layout on small screens (#270)

cartesi · Dec 2, 2024 · 7b59c8b · 7b59c8b
1 parent 038b071
commit 7b59c8b
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 32 deletions.
diff --git a/apps/web/src/components/specification/SpecificationFormView.tsx b/apps/web/src/components/specification/SpecificationFormView.tsx
@@ -6,11 +6,12 @@ import {
     GridCol,
     SegmentedControl,
     Stack,
+    useMantineTheme,
 } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { propOr } from "ramda";
 import { isFunction, isNilOrEmpty, isNotNilOrEmpty } from "ramda-adjunct";
-import { FC, useCallback, useState } from "react";
+import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { TbLayoutColumns, TbLayoutList } from "react-icons/tb";
 import { DecodingPreview } from "./components/DecodingPreview";
 import { SpecificationForm } from "./form/SpecificationForm";
@@ -21,15 +22,16 @@ import {
     useSpecForm,
 } from "./form/context";
 import {
-    specABIValidation,
     specAbiParamValidation,
+    specABIValidation,
     specConditionalsValidation,
     specEncodedDataValidation,
     specModeValidation,
     specNameValidation,
     specSliceInstructionsValidation,
 } from "./form/validations";
 import { JSON_ABI, Specification } from "./types";
+import { useMediaQuery } from "@mantine/hooks";
 
 type Layout = "split_screen" | "stack_screen";
 const getInitialValues = (spec?: Specification): SpecFormValues => {
@@ -65,6 +67,7 @@ export const SpecificationFormView: FC<ViewProps> = ({
     onSuccess,
 }) => {
     const [layout, setLayout] = useState<Layout>("split_screen");
+    const lastSelectedLayout = useRef<Layout>(layout);
     const colSpan = layout === "split_screen" ? 6 : 12;
     const form = useSpecForm({
         initialValues: getInitialValues(specification),
@@ -79,6 +82,8 @@ export const SpecificationFormView: FC<ViewProps> = ({
         },
     });
     const { formMode } = form.getTransformedValues();
+    const theme = useMantineTheme();
+    const isSmallDevice = useMediaQuery(`(max-width:${theme.breakpoints.sm})`);
 
     const onFinished = useCallback(
         (spec: Specification) => {
@@ -108,37 +113,46 @@ export const SpecificationFormView: FC<ViewProps> = ({
         });
     }, []);
 
+    useEffect(() => {
+        setLayout(isSmallDevice ? "stack_screen" : lastSelectedLayout.current);
+    }, [isSmallDevice]);
+
     return (
         <Stack>
-            <Flex justify="flex-start">
-                <SegmentedControl
-                    data-testid="specification-creation-view-switch"
-                    value={layout}
-                    onChange={(value) => {
-                        setLayout(value as Layout);
-                    }}
-                    data={[
-                        {
-                            value: "split_screen",
-                            label: (
-                                <Center style={{ gap: 10 }}>
-                                    <TbLayoutColumns size={18} />
-                                    <span>Split View</span>
-                                </Center>
-                            ),
-                        },
-                        {
-                            value: "stack_screen",
-                            label: (
-                                <Center style={{ gap: 10 }}>
-                                    <TbLayoutList size={18} />
-                                    <span>List View</span>
-                                </Center>
-                            ),
-                        },
-                    ]}
-                />
-            </Flex>
+            {!isSmallDevice && (
+                <Flex justify="flex-start">
+                    <SegmentedControl
+                        data-testid="specification-creation-view-switch"
+                        value={layout}
+                        onChange={(value) => {
+                            const nextValue = value as Layout;
+                            setLayout(nextValue);
+                            lastSelectedLayout.current = nextValue;
+                        }}
+                        data={[
+                            {
+                                value: "split_screen",
+                                label: (
+                                    <Center style={{ gap: 10 }}>
+                                        <TbLayoutColumns size={18} />
+                                        <span>Split View</span>
+                                    </Center>
+                                ),
+                            },
+                            {
+                                value: "stack_screen",
+                                label: (
+                                    <Center style={{ gap: 10 }}>
+                                        <TbLayoutList size={18} />
+                                        <span>List View</span>
+                                    </Center>
+                                ),
+                            },
+                        ]}
+                    />
+                </Flex>
+            )}
+
             <SpecFormProvider form={form}>
                 <Grid>
                     <GridCol span={colSpan}>

diff --git a/apps/web/src/components/specification/form/fields/ByteSlices.tsx b/apps/web/src/components/specification/form/fields/ByteSlices.tsx
@@ -78,11 +78,12 @@ const InstructionsReview: FC<Props> = ({ slices, onSliceChange }) => {
                     <Title order={4}>Review your definition</Title>
                 </Accordion.Control>
 
-                <Accordion.Panel>
+                <Accordion.Panel style={{ overflow: "auto" }}>
                     <Table
                         horizontalSpacing="xl"
                         highlightOnHover
                         data-testid="batch-review-table"
+                        styles={{ table: { width: "max-content" } }}
                     >
                         <Table.Thead>
                             <Table.Tr>

diff --git a/apps/web/test/components/specification/SpecificationFormView.test.tsx b/apps/web/test/components/specification/SpecificationFormView.test.tsx
@@ -19,6 +19,20 @@ import withMantineTheme from "../../utils/WithMantineTheme";
 import { encodedDataSamples } from "./encodedData.stubs";
 import { JotaiTestProvider } from "./jotaiHelpers";
 import { erc1155JSONABISpecStub } from "./specification.stubs";
+import * as mantineHooks from "@mantine/hooks";
+
+vi.mock("@mantine/hooks", async () => {
+    const actual = await vi.importActual<typeof mantineHooks>("@mantine/hooks");
+
+    return {
+        ...actual,
+        useMediaQuery: vi.fn(),
+    };
+});
+
+const useMediaQueryMock = vi.mocked(mantineHooks.useMediaQuery, {
+    partial: true,
+});
 
 const View = withMantineTheme(SpecificationFormView);
 type Props = Parameters<typeof View>[0];
@@ -831,4 +845,24 @@ describe("Specification Form View", () => {
             });
         });
     });
+
+    describe("Layout", () => {
+        it("should hide view switch on small devices", async () => {
+            useMediaQueryMock.mockReturnValue(true);
+            await act(async () => render(<StatefulView />));
+
+            expect(() =>
+                screen.getByTestId("specification-creation-view-switch"),
+            ).toThrow("Unable to find an element");
+        });
+
+        it("should show view switch on large devices", async () => {
+            useMediaQueryMock.mockReturnValue(false);
+            await act(async () => render(<StatefulView />));
+
+            expect(
+                screen.getByTestId("specification-creation-view-switch"),
+            ).toBeInTheDocument();
+        });
+    });
 });