fix: フォーム一覧の表示画面でフォームが無いときに画面が崩れるのを修正

src/app/(authed)/admin/forms/_components/FormCreateButton.tsx

@@ -0,0 +1,23 @@
+import { Add } from '@mui/icons-material';
+import Button from '@mui/material/Button';
+
+const FormCreateButton = () => {
+  return (
+    <Button
+      variant="contained"
+      startIcon={<Add />}
+      href="/admin/forms/create"
+      sx={{
+        width: '97px',
+        height: '36px',
+        boxShadow:
+          '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12)',
+        borderRadius: '64px',
+      }}
+    >
+      NEW
+    </Button>
+  );
+};
+
+export default FormCreateButton;

src/app/(authed)/admin/forms/_components/FormTagFilter.tsx

@@ -0,0 +1,46 @@
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import TextField from '@mui/material/TextField';
+
+const FormTagFilter = () => {
+  return (
+    <Autocomplete
+      multiple
+      id="filter-forms"
+      options={['Open', 'Closed']}
+      getOptionLabel={(option) => option}
+      defaultValue={['Open']}
+      renderTags={(value: readonly string[], getTagProps) =>
+        value.map((option: string, index: number) => (
+          <Chip
+            label={option}
+            sx={{ background: '#FFFFFF29' }}
+            {...getTagProps({ index })}
+            key={index}
+          />
+        ))
+      }
+      renderOption={(props, option) => {
+        return (
+          <Box component="span" {...props} style={{ color: 'black' }}>
+            {option}
+          </Box>
+        );
+      }}
+      renderInput={(params) => (
+        // @ts-expect-error (解決方法がよくわからないのでとりあえずignoreする)
+        // FIXME: あとで調べる
+        <TextField
+          {...params}
+          variant="standard"
+          label="Filter"
+          sx={{ borderBottom: '1px solid #FFFFFF6B' }}
+          InputLabelProps={{ style: { color: '#FFFFFF80' } }}
+        />
+      )}
+    />
+  );
+};
+
+export default FormTagFilter;

src/app/(authed)/admin/forms/page.tsx

@@ -1,19 +1,12 @@
 'use client';
 
-import { Add } from '@mui/icons-material';
-import {
-  Autocomplete,
-  Box,
-  Button,
-  Chip,
-  Grid,
-  Stack,
-  TextField,
-} from '@mui/material';
+import { Grid } from '@mui/material';
 import useSWR from 'swr';
 import ErrorModal from '@/app/_components/ErrorModal';
 import LoadingCircular from '@/app/_components/LoadingCircular';
 import { Forms } from './_components/DashboardFormList';
+import FormCreateButton from './_components/FormCreateButton';
+import FormTagFilter from './_components/FormTagFilter';
 import type {
   ErrorResponse,
   GetFormsResponse,
@@ -31,68 +24,26 @@ const Home = () => {
   }
 
   return (
-    <Stack spacing={2}>
-      <Grid container sx={{ justifyContent: 'space-between' }}>
-        <Grid item>
-          <Autocomplete
-            multiple
-            id="filter-forms"
-            options={['Open', 'Closed']}
-            getOptionLabel={(option) => option}
-            defaultValue={['Open']}
-            renderTags={(value: readonly string[], getTagProps) =>
-              value.map((option: string, index: number) => (
-                <Chip
-                  label={option}
-                  sx={{ background: '#FFFFFF29' }}
-                  {...getTagProps({ index })}
-                  key={index}
-                />
-              ))
-            }
-            renderOption={(props, option) => {
-              return (
-                <Box component="span" {...props} style={{ color: 'black' }}>
-                  {option}
-                </Box>
-              );
-            }}
-            renderInput={(params) => (
-              // @ts-expect-error (解決方法がよくわからないのでとりあえずignoreする)
-              // FIXME: あとで調べる
-              <TextField
-                {...params}
-                variant="standard"
-                label="Filter"
-                sx={{ borderBottom: '1px solid #FFFFFF6B' }}
-                InputLabelProps={{ style: { color: '#FFFFFF80' } }}
-              />
-            )}
-          />
-        </Grid>
-        <Grid item>
-          <Button
-            variant="contained"
-            startIcon={<Add />}
-            href="/admin/forms/create"
-            sx={{
-              width: '97px',
-              height: '36px',
-              boxShadow:
-                '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12)',
-              borderRadius: '64px',
-            }}
-          >
-            NEW
-          </Button>
+    <Grid container direction="column" justifyContent="flex-start" spacing={4}>
+      <Grid item>
+        <Grid
+          container
+          spacing={2}
+          direction="row"
+          justifyContent="space-between"
+        >
+          <Grid item xs="auto">
+            <FormTagFilter />
+          </Grid>
+          <Grid item xs={2}>
+            <FormCreateButton />
+          </Grid>
         </Grid>
       </Grid>
-      <Grid container spacing={2}>
-        <Grid item>
-          <Forms forms={forms.right} />
-        </Grid>
+      <Grid item>
+        <Forms forms={forms.right} />
       </Grid>
-    </Stack>
+    </Grid>
   );
 };
 

src/app/page.module.css

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
   padding: 6rem;
   min-height: 100vh;
 }