fix(settings): reduce font-size on small devices

With French translation, words are a little longer so I reduce the
font size on small devices to avoid line breaking.

2 files changed, 28 insertions, 4 deletions

diff --git a/src/components/organisms/forms/settings-form.module.scss b/src/components/organisms/forms/settings-form.module.scss
index a6a2077..a05c60c 100644
--- a/src/components/organisms/forms/settings-form.module.scss
+++ b/src/components/organisms/forms/settings-form.module.scss
@@ -2,10 +2,25 @@
 
 .label {
   margin-right: auto;
+}
 
+.setting,
+.label--select {
   @include mix.media("screen") {
+    @include mix.dimensions(null, "2xs") {
+      font-size: var(--font-size-sm);
+    }
+
     @include mix.dimensions(null, "2xs", "height") {
       font-size: var(--font-size-sm);
     }
   }
 }
+
+.items {
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "2xs", "height") {
+      margin: var(--spacing-2xs) 0;
+    }
+  }
+}
diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx
index c897fa5..9c2cd2c 100644
--- a/src/components/organisms/forms/settings-form.tsx
+++ b/src/components/organisms/forms/settings-form.tsx
@@ -35,17 +35,26 @@ const SettingsForm: FC<SettingsFormProps> = ({
   });
 
   return (
-    <Form aria-label={ariaLabel} onSubmit={() => null}>
-      <ThemeToggle labelClassName={styles.label} />
-      <PrismThemeToggle labelClassName={styles.label} />
+    <Form
+      aria-label={ariaLabel}
+      itemsClassName={styles.items}
+      onSubmit={() => null}
+    >
+      <ThemeToggle className={styles.setting} labelClassName={styles.label} />
+      <PrismThemeToggle
+        className={styles.setting}
+        labelClassName={styles.label}
+      />
       <MotionToggle
+        className={styles.setting}
         labelClassName={styles.label}
         storageKey={motionStorageKey}
         value={false}
       />
       <AckeeSelect
+        className={styles.setting}
         initialValue="full"
-        labelClassName={styles.label}
+        labelClassName={`${styles.label} ${styles['label--select']}`}
         tooltipClassName={tooltipClassName}
         storageKey={ackeeStorageKey}
       />