[EPICSYSTEM-73] limit multi-page toggle width (#50)

bcgov · May 23, 2024 · 91031ef · 91031ef
1 parent 346194d
commit 91031ef
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 54 deletions.
diff --git a/met-web/src/components/survey/building/index.tsx b/met-web/src/components/survey/building/index.tsx
@@ -283,49 +283,51 @@ const SurveyFormBuilder = () => {
                 <Divider />
             </Grid>
             <Grid item xs={12}>
-                <FormGroup>
-                    <FormControlLabel
-                        control={
-                            <Switch
-                                checked={isMultiPage}
-                                onChange={(e) => {
-                                    dispatch(
-                                        openNotificationModal({
-                                            open: true,
-                                            data: {
-                                                header: 'Change Survey Type',
-                                                subText: [
-                                                    {
-                                                        text: `You will be changing the survey type from ${
-                                                            isMultiPage
-                                                                ? 'multi page to single page'
-                                                                : 'single page to multi page'
-                                                        }.`,
-                                                    },
-                                                    {
-                                                        text: 'You will lose all current progress if you do.',
-                                                        bold: true,
-                                                    },
-                                                    {
-                                                        text: 'Do you want to change this survey type?',
+                <Stack direction="row">
+                    <FormGroup>
+                        <FormControlLabel
+                            control={
+                                <Switch
+                                    checked={isMultiPage}
+                                    onChange={(e) => {
+                                        dispatch(
+                                            openNotificationModal({
+                                                open: true,
+                                                data: {
+                                                    header: 'Change Survey Type',
+                                                    subText: [
+                                                        {
+                                                            text: `You will be changing the survey type from ${
+                                                                isMultiPage
+                                                                    ? 'multi page to single page'
+                                                                    : 'single page to multi page'
+                                                            }.`,
+                                                        },
+                                                        {
+                                                            text: 'You will lose all current progress if you do.',
+                                                            bold: true,
+                                                        },
+                                                        {
+                                                            text: 'Do you want to change this survey type?',
+                                                        },
+                                                    ],
+                                                    handleConfirm: () => {
+                                                        setFormDefinition({
+                                                            display: isMultiPage ? 'form' : 'wizard',
+                                                            components: [],
+                                                        });
                                                     },
-                                                ],
-                                                handleConfirm: () => {
-                                                    setFormDefinition({
-                                                        display: isMultiPage ? 'form' : 'wizard',
-                                                        components: [],
-                                                    });
                                                 },
-                                            },
-                                            type: 'confirm',
-                                        }),
-                                    );
-                                }}
-                            />
-                        }
-                        label="Multi-page"
-                    />
-                </FormGroup>
+                                                type: 'confirm',
+                                            }),
+                                        );
+                                    }}
+                                />
+                            }
+                            label="Multi-page"
+                        />
+                    </FormGroup>
+                </Stack>
             </Grid>
             <Grid item xs={12}>
                 <FormBuilder handleFormChange={handleFormChange} savedForm={formDefinition} />

diff --git a/met-web/src/components/survey/create/CreateOptions.tsx b/met-web/src/components/survey/create/CreateOptions.tsx
@@ -103,19 +103,21 @@ export const CreateOptions = () => {
             </Grid>
             <Grid item xs={6}></Grid>
             <Grid item xs={6}>
-                <FormGroup>
-                    <FormControlLabel
-                        control={
-                            <Switch
-                                checked={multiPageSurvey}
-                                onChange={(e) => {
-                                    setMultiPageSurvey(!multiPageSurvey);
-                                }}
-                            />
-                        }
-                        label="Multi-page"
-                    />
-                </FormGroup>
+                <Stack direction="row">
+                    <FormGroup>
+                        <FormControlLabel
+                            control={
+                                <Switch
+                                    checked={multiPageSurvey}
+                                    onChange={(e) => {
+                                        setMultiPageSurvey(!multiPageSurvey);
+                                    }}
+                                />
+                            }
+                            label="Multi-page"
+                        />
+                    </FormGroup>
+                </Stack>
                 <MetDescription>
                     The multi-page option will enable you to add one, or many pages to a survey. It will also create a
                     progress bar. If you want to create a 1-page survey, turn off the multi-page toggle.