fix(settings): avoid cropped tooltip on small devices

I changed the settings disposition to make tooltip positioning easier.
Jest complains about ref passed but everything seems to work as
expected so I'm not sure it is relevant. Maybe a bug with cloneElement.

1 files changed, 3 insertions, 3 deletions

diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index ee59e26..774de64 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -50,7 +50,7 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
     <div className={`${sharedStyles.item} ${settingsStyles.item}`} ref={ref}>
       <BooleanField
         checked={isActive}
-        className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`}
+        className={sharedStyles.checkbox}
         id="settings-button"
         name="settings-button"
         onChange={setIsActive}
@@ -67,9 +67,9 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
       </FlippingLabel>
       <SettingsModal
         ackeeStorageKey={ackeeStorageKey}
-        className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`}
+        className={`${sharedStyles.modal} ${className}`}
         motionStorageKey={motionStorageKey}
-        tooltipClassName={tooltipClassName}
+        tooltipClassName={`${settingsStyles.tooltip} ${tooltipClassName}`}
       />
     </div>
   );