From 36d129414b696bd2a633d379cac1dff867f64413 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 25 May 2022 15:49:31 +0200
Subject: 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.
---
 src/components/atoms/forms/form.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'src/components/atoms/forms/form.tsx')

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
@@ -22,6 +22,10 @@ export type FormProps = {
    * Wrap each items with a div. Default: true.
    */
   grouped?: boolean;
+  /**
+   * If grouped, set additional classnames to the items wrapper.
+   */
+  itemsClassName?: string;
   /**
    * A callback function to execute on submit.
    */
@@ -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>
       ) : (
-- 
cgit v1.2.3