added gaps to settings

src/components/containers/Grid/index.tsx

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren } from "react";
+import styles from "./styles.module.scss";
+import classNames from "classnames";
+
+type VerticalListProps = PropsWithChildren & {
+  direction?: "row" | "column";
+};
+
+const Grid: FC<VerticalListProps> = ({ children, direction = "column" }) => (
+  <div className={classNames(styles.list, styles[direction])}>{children}</div>
+);
+
+export { Grid };

src/components/containers/Grid/styles.module.scss

@@ -0,0 +1,16 @@
+.list {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+
+  &.column {
+    flex-direction: column;
+  }
+
+  &.row {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: stretch;
+    align-items: stretch;
+  }
+}

src/components/containers/RowGroup/index.tsx

@@ -1,18 +1,25 @@
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, useMemo } from "react";
 import styles from "./styles.module.scss";
 
 interface RowGroupProps {
-  children: ReactNode[];
+  children: ReactNode | ReactNode[];
 }
 
-const RowGroup: FC<RowGroupProps> = ({ children }) => (
+const RowGroup: FC<RowGroupProps> = ({ children }) => {
+  const items = useMemo(
+    () => (Array.isArray(children) ? children : [children]),
+    [children]
+  );
+
+  return (
     <div className={styles.group}>
-    {children.map((item, key) => (
+      {items.map((item, key) => (
         <div key={key} className={styles.row}>
           {item}
         </div>
       ))}
     </div>
   );
+};
 
 export { RowGroup };

src/components/containers/RowGroup/styles.module.scss

@@ -3,6 +3,7 @@
   flex-direction: column;
   border-radius: 6px;
   box-shadow: var(--color-border) 0 0 0 1px;
+  width: 100%;
 }
 
 .row {

src/modules/settings/containers/ColorSettings/index.tsx

@@ -10,6 +10,7 @@ import {
 import { useBuiltinThemes } from "~/modules/theme/constants/themes";
 import { fillThemeHeadings } from "~/modules/theme/utils/fillThemeHeadings";
 import { ThemeSelect } from "../../components/ThemeSelect";
+import { Grid } from "~/components/containers/Grid";
 
 const ColorSettings: FC = () => {
   const { update, settings } = useSettings();
@@ -55,6 +56,7 @@ const ColorSettings: FC = () => {
   }, [currentTheme, t]);
 
   return (
+    <Grid>
       <RowGroup>
         <label>
           <SettingsRow title={t("Color theme")} subTitle={themeSubtitle}>
@@ -65,7 +67,10 @@ const ColorSettings: FC = () => {
             />
           </SettingsRow>
         </label>
+      </RowGroup>
 
+      <Grid direction="row">
+        <RowGroup>
           <label>
             <SettingsRow title={t("Background")}>
               <input
@@ -105,7 +110,9 @@ const ColorSettings: FC = () => {
               />
             </SettingsRow>
           </label>
+        </RowGroup>
 
+        <RowGroup>
           <label>
             <SettingsRow title={t("Heading 1")}>
               <input
@@ -156,6 +163,8 @@ const ColorSettings: FC = () => {
             </SettingsRow>
           </label>
         </RowGroup>
+      </Grid>
+    </Grid>
   );
 };