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.

15 files changed, 142 insertions, 12 deletions

diff --git a/src/components/atoms/forms/form.tsx b/src/components/atoms/forms/form.tsx
index b819aea..3307153 100644
--- a/src/components/atoms/forms/form.tsx
+++ b/src/components/atoms/forms/form.tsx
@@ -23,6 +23,10 @@ export type FormProps = {
    */
   grouped?: boolean;
   /**
+   * If grouped, set additional classnames to the items wrapper.
+   */
+  itemsClassName?: string;
+  /**
    * A callback function to execute on submit.
    */
   onSubmit: () => void;
@@ -36,6 +40,7 @@ export type FormProps = {
 const Form: FC<FormProps> = ({
   children,
   grouped = true,
+  itemsClassName = '',
   onSubmit,
   ...props
 }) => {
@@ -48,7 +53,10 @@ const Form: FC<FormProps> = ({
   const getFormItems = (): JSX.Element[] => {
     return arrayChildren.map((child, index) =>
       grouped ? (
-        <div key={`item-${index}`} className={styles.item}>
+        <div
+          key={`item-${index}`}
+          className={`${styles.item} ${itemsClassName}`}
+        >
           {child}
         </div>
       ) : (
diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx
index 6b42b71..81eb5df 100644
--- a/src/components/molecules/forms/ackee-select.stories.tsx
+++ b/src/components/molecules/forms/ackee-select.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Molecules/Forms/Select',
   component: AckeeSelect,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the select wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     initialValue: {
       control: {
         type: 'select',
diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx
index 34850fb..f00ca74 100644
--- a/src/components/molecules/forms/ackee-select.tsx
+++ b/src/components/molecules/forms/ackee-select.tsx
@@ -11,7 +11,7 @@ import SelectWithTooltip, {
 
 export type AckeeSelectProps = Pick<
   SelectWithTooltipProps,
-  'labelClassName' | 'tooltipClassName'
+  'className' | 'labelClassName' | 'tooltipClassName'
 > & {
   /**
    * A default value for Ackee settings.
diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx
index 60430d5..e9939bd 100644
--- a/src/components/molecules/forms/motion-toggle.stories.tsx
+++ b/src/components/molecules/forms/motion-toggle.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Molecules/Forms/Toggle',
   component: MotionToggleComponent,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the toggle wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     labelClassName: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index cbe38fe..55ff150 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -9,7 +9,7 @@ import { useIntl } from 'react-intl';
 
 export type MotionToggleProps = Pick<
   ToggleProps,
-  'labelClassName' | 'value'
+  'className' | 'labelClassName' | 'value'
 > & {
   /**
    * The local storage key to save preference.
diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
index ef4ed6e..6a88e51 100644
--- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Molecules/Forms/Toggle',
   component: PrismThemeToggle,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the toggle wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     labelClassName: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
index 3320722..e0b795f 100644
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -8,7 +8,10 @@ import { usePrismTheme } from '@utils/providers/prism-theme';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 
-export type PrismThemeToggleProps = Pick<ToggleProps, 'labelClassName'>;
+export type PrismThemeToggleProps = Pick<
+  ToggleProps,
+  'className' | 'labelClassName'
+>;
 
 /**
  * PrismThemeToggle component
diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx
index ddf5d4c..d6206a9 100644
--- a/src/components/molecules/forms/select-with-tooltip.stories.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx
@@ -9,6 +9,19 @@ export default {
   title: 'Molecules/Forms/Select',
   component: SelectWithTooltip,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the select wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     content: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx
index 29e2563..46075c2 100644
--- a/src/components/molecules/forms/select-with-tooltip.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.tsx
@@ -11,6 +11,10 @@ export type SelectWithTooltipProps = Omit<
 > &
   Pick<TooltipProps, 'title' | 'content'> & {
     /**
+     * Set additional classnames to the select wrapper.
+     */
+    className?: string;
+    /**
      * Set additional classnames to the tooltip wrapper.
      */
     tooltipClassName?: TooltipProps['className'];
@@ -22,9 +26,10 @@ export type SelectWithTooltipProps = Omit<
  * Render a select with a button to display a tooltip about options.
  */
 const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
-  title,
+  className = '',
   content,
   id,
+  title,
   tooltipClassName = '',
   ...props
 }) => {
@@ -47,7 +52,7 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
   );
 
   return (
-    <div className={styles.wrapper}>
+    <div className={`${styles.wrapper} ${className}`}>
       <LabelledSelect
         labelPosition="left"
         id={id}
diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx
index 5ebf5a2..a7bebb4 100644
--- a/src/components/molecules/forms/theme-toggle.stories.tsx
+++ b/src/components/molecules/forms/theme-toggle.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Molecules/Forms/Toggle',
   component: ThemeToggle,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the toggle wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     labelClassName: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index 61ee4c6..e9dd5e4 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -8,7 +8,10 @@ import { useTheme } from 'next-themes';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 
-export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName'>;
+export type ThemeToggleProps = Pick<
+  ToggleProps,
+  'className' | 'labelClassName'
+>;
 
 /**
  * ThemeToggle component
diff --git a/src/components/molecules/forms/toggle.stories.tsx b/src/components/molecules/forms/toggle.stories.tsx
index 0351ab7..f1b8296 100644
--- a/src/components/molecules/forms/toggle.stories.tsx
+++ b/src/components/molecules/forms/toggle.stories.tsx
@@ -17,6 +17,19 @@ export default {
         value: {},
       },
     },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the toggle wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     id: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx
index 288062d..0fac45c 100644
--- a/src/components/molecules/forms/toggle.tsx
+++ b/src/components/molecules/forms/toggle.tsx
@@ -20,6 +20,10 @@ export type ToggleProps = Pick<CheckboxProps, 'id' | 'name'> & {
    */
   choices: ToggleChoices;
   /**
+   * Set additional classnames to the toggle wrapper.
+   */
+  className?: string;
+  /**
    * The toggle label.
    */
   label: string;
@@ -48,6 +52,7 @@ export type ToggleProps = Pick<CheckboxProps, 'id' | 'name'> & {
  */
 const Toggle: FC<ToggleProps> = ({
   choices,
+  className = '',
   id,
   label,
   labelClassName = '',
@@ -65,7 +70,11 @@ const Toggle: FC<ToggleProps> = ({
         setValue={() => setValue(!value)}
         className={styles.checkbox}
       />
-      <Label size={labelSize} htmlFor={id} className={styles.label}>
+      <Label
+        size={labelSize}
+        htmlFor={id}
+        className={`${styles.label} ${className}`}
+      >
         <span className={`${styles.title} ${labelClassName}`}>{label}</span>
         {choices.left}
         <span className={styles.toggle}></span>
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}
       />