fix: refine responsive layout settings

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css

@@ -4,7 +4,7 @@
   background: color-mix(in srgb, var(--mantine-color-body) 82%, var(--mantine-primary-color-light));
   padding: var(--mantine-spacing-xs);
   min-height: 7rem;
-  max-height: min(24rem, 48dvh);
+  max-height: min(18rem, 38dvh);
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx

@@ -45,7 +45,7 @@ export const LayoutPreview = ({ board, layout, layouts, sourceLayout, apps }: Pr
           {layout.columnCount} {t("board.setting.section.layout.preview.columns")}
         </Text>
       </Group>
-      <Box w={{ base: "100%", md: previewWidth }} maw="100%" className={classes.canvas}>
+      <Box w={{ base: "100%", md: `max(${previewWidth}, 14rem)` }} maw="100%" className={classes.canvas}>
         {elements.length === 0 ? (
           <Text size="xs" c="dimmed" ta="center" py="xl">
             {t("board.setting.section.layout.preview.empty")}

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css

@@ -6,7 +6,7 @@
   display: grid;
   gap: 6px;
   width: 100%;
-  min-height: 112px;
+  min-height: 88px;
   padding: 8px;
   overflow: hidden;
   background: var(--mantine-color-body);

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx

@@ -168,7 +168,7 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
               bg="transparent"
             >
               <Grid gap={{ base: "lg", xl: "xl" }} align="flex-start">
-                <Grid.Col span={{ base: 12, md: 4 }}>
+                <Grid.Col span={{ base: 12, md: 6, lg: 4 }}>
                   <Stack gap="md">
                     <TextInput {...form.getInputProps(`layouts.${index}.name`)} label={t("layout.field.name.label")} />
                     <Input.Wrapper label={t("layout.field.columnCount.label")}>
@@ -209,16 +209,9 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
                       }
                       max={layout.role === "custom" ? baseBreakpoint - 1 : 32767}
                     />
-                    <GutterSettings
-                      left={layout.leftGutterColumnCount}
-                      right={layout.rightGutterColumnCount}
-                      columnCount={layout.columnCount}
-                      onLeftChange={(value) => form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, value)}
-                      onRightChange={(value) => form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, value)}
-                    />
                   </Stack>
                 </Grid.Col>
-                <Grid.Col span={{ base: 12, md: 8 }}>
+                <Grid.Col span={{ base: 12, md: 6, lg: 4 }}>
                   {sourceLayout && (
                     <LayoutPreview
                       board={board}
@@ -229,6 +222,15 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
                     />
                   )}
                 </Grid.Col>
+                <Grid.Col span={{ base: 12, lg: 4 }}>
+                  <GutterSettings
+                    left={layout.leftGutterColumnCount}
+                    right={layout.rightGutterColumnCount}
+                    columnCount={layout.columnCount}
+                    onLeftChange={(value) => form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, value)}
+                    onRightChange={(value) => form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, value)}
+                  />
+                </Grid.Col>
               </Grid>
 
               <Group justify="space-between" mt="lg" gap="sm" wrap="wrap">
@@ -334,7 +336,7 @@ const GutterSettings = ({ left, right, columnCount, onLeftChange, onRightChange
         <GutterPreview left={left} right={right} columnCount={columnCount} />
 
         <Grid>
-          <Grid.Col span={{ base: 12, md: 6 }}>
+          <Grid.Col span={{ base: 12, sm: 6 }}>
             <GutterControl
               side="left"
               value={left}
@@ -342,7 +344,7 @@ const GutterSettings = ({ left, right, columnCount, onLeftChange, onRightChange
               onChange={onLeftChange}
             />
           </Grid.Col>
-          <Grid.Col span={{ base: 12, md: 6 }}>
+          <Grid.Col span={{ base: 12, sm: 6 }}>
             <GutterControl
               side="right"
               value={right}
@@ -377,7 +379,6 @@ const GutterControl = ({
         disabled={max < 1}
         onChange={(event) => onChange(event.currentTarget.checked ? Math.min(2, max) : 0)}
         label={t(`layout.field.gutters.${side}.label`)}
-        description={t(`layout.field.gutters.${side}.description`)}
       />
       {enabled && (
         <Input.Wrapper label={t("layout.field.gutters.width.label")}>

apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx

@@ -53,7 +53,7 @@ export default async function BoardSettingsPage(props: Props) {
   }
 
   return (
-    <Container fluid px={{ base: "md", md: "xl" }}>
+    <Container size="xl" px={{ base: "md", md: "xl" }}>
       <Stack>
         <Title>{t("title", { boardName: capitalize(board.name) })}</Title>
         <BoardSettingsForm