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/molecules/forms/toggle.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/components/molecules/forms/toggle.tsx')

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
@@ -19,6 +19,10 @@ export type ToggleProps = Pick<CheckboxProps, 'id' | 'name'> & {
    * The toggle choices.
    */
   choices: ToggleChoices;
+  /**
+   * Set additional classnames to the toggle wrapper.
+   */
+  className?: string;
   /**
    * The toggle label.
    */
@@ -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>
-- 
cgit v1.2.3