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.

1 files changed, 9 insertions, 1 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>
       ) : (