From c56edfdc655a2a97f72fa390aca4023035415e02 Mon Sep 17 00:00:00 2001
From: Tagaishi <tagaishi@hotmail.ch>
Date: Tue, 25 Jul 2023 22:16:59 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Multiline=20tooltip=20and=20?=
 =?UTF-8?q?=F0=9F=8E=A8=20one=20line=20code=20rework?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Tiles/Widgets/WidgetsEditModal.tsx        | 81 ++++++++++++++++---
 1 file changed, 72 insertions(+), 9 deletions(-)

diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
index 6dbbabda9..2737b3f4d 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -150,7 +150,14 @@ const WidgetOptionTypeSwitch: FC<{
             {...option.inputProps}
           />
           {info?
-            <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
+            <Tooltip.Floating
+              label={t(`descriptor.settings.${key}.info`)}
+              position="right-start"
+              c={ colorScheme === 'light' ? "black" : "dark.0" }
+              color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
+              width={300}
+              multiline
+            >
               <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
             </Tooltip.Floating> : undefined
           }
@@ -163,7 +170,14 @@ const WidgetOptionTypeSwitch: FC<{
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
             {info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
+              <Tooltip.Floating
+                label={t(`descriptor.settings.${key}.info`)}
+                position="right-start"
+                c={ colorScheme === 'light' ? "black" : "dark.0" }
+                color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
+                width={300}
+                multiline
+              >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -182,7 +196,14 @@ const WidgetOptionTypeSwitch: FC<{
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
             {info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
+              <Tooltip.Floating
+                label={t(`descriptor.settings.${key}.info`)}
+                position="right-start"
+                c={ colorScheme === 'light' ? "black" : "dark.0" }
+                color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
+                width={300}
+                multiline
+              >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -203,7 +224,14 @@ const WidgetOptionTypeSwitch: FC<{
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
             {info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
+              <Tooltip.Floating
+                label={t(`descriptor.settings.${key}.info`)}
+                position="right-start"
+                c={ colorScheme === 'light' ? "black" : "dark.0" }
+                color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
+                width={300}
+                multiline
+              >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -224,7 +252,14 @@ const WidgetOptionTypeSwitch: FC<{
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
             {info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
+              <Tooltip.Floating
+                label={t(`descriptor.settings.${key}.info`)}
+                position="right-start"
+                c={ colorScheme === 'light' ? "black" : "dark.0" }
+                color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
+                width={300}
+                multiline
+              >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -243,7 +278,14 @@ const WidgetOptionTypeSwitch: FC<{
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
             {info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
+              <Tooltip.Floating
+                label={t(`descriptor.settings.${key}.info`)}
+                position="right-start"
+                c={ colorScheme === 'light' ? "black" : "dark.0" }
+                color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
+                width={300}
+                multiline
+              >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -298,7 +340,14 @@ const WidgetOptionTypeSwitch: FC<{
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
             {info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
+              <Tooltip.Floating
+                label={t(`descriptor.settings.${key}.info`)}
+                position="right-start"
+                c={ colorScheme === 'light' ? "black" : "dark.0" }
+                color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
+                width={300}
+                multiline
+              >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -332,7 +381,14 @@ const WidgetOptionTypeSwitch: FC<{
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
             {info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
+              <Tooltip.Floating
+                label={t(`descriptor.settings.${key}.info`)}
+                position="right-start"
+                c={ colorScheme === 'light' ? "black" : "dark.0" }
+                color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
+                width={300}
+                multiline
+              >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }
@@ -362,7 +418,14 @@ const WidgetOptionTypeSwitch: FC<{
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
             {info?
-              <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
+              <Tooltip.Floating
+                label={t(`descriptor.settings.${key}.info`)}
+                position="right-start"
+                c={ colorScheme === 'light' ? "black" : "dark.0" }
+                color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
+                width={300}
+                multiline
+              >
                 <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
               </Tooltip.Floating> : undefined
             }