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.

11 files changed, 177 insertions, 385 deletions

diff --git a/src/components/organisms/forms/settings-form.module.scss b/src/components/organisms/forms/settings-form.module.scss
deleted file mode 100644
index 647f1b5..0000000
--- a/src/components/organisms/forms/settings-form.module.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: flex-start;
-  align-content: flex-start;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      column-gap: var(--spacing-lg);
-      row-gap: var(--spacing-xs);
-      font-size: var(--font-size-sm);
-    }
-  }
-
-  .label {
-    @include mix.media("screen") {
-      @include mix.dimensions(null, "2xs", "height") {
-        margin: 0 auto;
-        float: none;
-        font-size: var(--font-size-sm);
-      }
-
-      @include mix.dimensions(null, "2xs") {
-        //font-size: var(--font-size-sm);
-      }
-    }
-  }
-
-  .tooltip {
-    top: unset;
-    bottom: calc(100% + var(--spacing-2xs));
-    font-size: var(--font-size-sm);
-    transform-origin: bottom center;
-
-    @include mix.media("screen") {
-      @include mix.dimensions(null, "2xs", "height") {
-        width: 250%;
-        transform-origin: bottom left;
-      }
-
-      @include mix.dimensions("sm") {
-        font-size: var(--font-size-md);
-      }
-    }
-  }
-}
-
-.items {
-  margin: var(--spacing-2xs) 0;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      display: flex;
-      flex-flow: column wrap;
-      max-width: fit-content;
-      margin: 0;
-    }
-  }
-}
-
-.group {
-  margin-left: auto;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      margin: auto;
-    }
-  }
-}
-
-.fieldset__body {
-  margin-left: auto;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      margin: 0 auto;
-    }
-  }
-}
diff --git a/src/components/organisms/forms/settings-form.stories.tsx b/src/components/organisms/forms/settings-form.stories.tsx
deleted file mode 100644
index de9f769..0000000
--- a/src/components/organisms/forms/settings-form.stories.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture';
-import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SettingsForm from './settings-form';
-
-/**
- * SettingsModal - Storybook Meta
- */
-export default {
-  title: 'Organisms/Forms',
-  component: SettingsForm,
-  argTypes: {
-    ackeeStorageKey: {
-      control: {
-        type: 'text',
-      },
-      description: 'The local storage key for Ackee setting.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the modal wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    motionStorageKey: {
-      control: {
-        type: 'text',
-      },
-      description: 'The local storage key for reduced motion setting.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    tooltipClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the tooltip wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof SettingsForm>;
-
-const Template: ComponentStory<typeof SettingsForm> = (args) => (
-  <SettingsForm {...args} />
-);
-
-/**
- * Form Stories - Settings
- */
-export const Settings = Template.bind({});
-Settings.args = {
-  ackeeStorageKey,
-  motionStorageKey,
-};
diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx
deleted file mode 100644
index de2d4c9..0000000
--- a/src/components/organisms/forms/settings-form.test.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture';
-import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture';
-import { render, screen } from '@tests/utils';
-import SettingsForm from './settings-form';
-
-describe('SettingsForm', () => {
-  it('renders a form', () => {
-    render(
-      <SettingsForm
-        ackeeStorageKey={ackeeStorageKey}
-        motionStorageKey={motionStorageKey}
-      />
-    );
-    expect(
-      screen.getByRole('form', { name: /^Settings form/i })
-    ).toBeInTheDocument();
-  });
-
-  it('renders a theme setting', () => {
-    render(
-      <SettingsForm
-        ackeeStorageKey={ackeeStorageKey}
-        motionStorageKey={motionStorageKey}
-      />
-    );
-    expect(
-      screen.getByRole('radiogroup', { name: /^Theme:/i })
-    ).toBeInTheDocument();
-  });
-
-  it('renders a code blocks setting', () => {
-    render(
-      <SettingsForm
-        ackeeStorageKey={ackeeStorageKey}
-        motionStorageKey={motionStorageKey}
-      />
-    );
-    expect(
-      screen.getByRole('radiogroup', { name: /^Code blocks:/i })
-    ).toBeInTheDocument();
-  });
-
-  it('renders a motion setting', () => {
-    render(
-      <SettingsForm
-        ackeeStorageKey={ackeeStorageKey}
-        motionStorageKey={motionStorageKey}
-      />
-    );
-    expect(
-      screen.getByRole('radiogroup', { name: /^Animations:/i })
-    ).toBeInTheDocument();
-  });
-
-  it('renders a Ackee setting', () => {
-    render(
-      <SettingsForm
-        ackeeStorageKey={ackeeStorageKey}
-        motionStorageKey={motionStorageKey}
-      />
-    );
-    expect(
-      screen.getByRole('radiogroup', { name: /^Tracking:/i })
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx
deleted file mode 100644
index 5d915a8..0000000
--- a/src/components/organisms/forms/settings-form.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import Form from '@components/atoms/forms/form';
-import AckeeToggle, {
-  type AckeeToggleProps,
-} from '@components/molecules/forms/ackee-toggle';
-import MotionToggle, {
-  type MotionToggleProps,
-} from '@components/molecules/forms/motion-toggle';
-import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle';
-import ThemeToggle from '@components/molecules/forms/theme-toggle';
-import { FC } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './settings-form.module.scss';
-
-export type SettingsFormProps = Pick<AckeeToggleProps, 'tooltipClassName'> & {
-  /**
-   * The local storage key for Ackee settings.
-   */
-  ackeeStorageKey: AckeeToggleProps['storageKey'];
-  /**
-   * The local storage key for Reduce motion settings.
-   */
-  motionStorageKey: MotionToggleProps['storageKey'];
-};
-
-const SettingsForm: FC<SettingsFormProps> = ({
-  ackeeStorageKey,
-  motionStorageKey,
-  tooltipClassName,
-}) => {
-  const intl = useIntl();
-  const ariaLabel = intl.formatMessage({
-    defaultMessage: 'Settings form',
-    id: 'gX+YVy',
-    description: 'SettingsForm: an accessible form name',
-  });
-
-  return (
-    <Form
-      aria-label={ariaLabel}
-      className={styles.wrapper}
-      itemsClassName={styles.items}
-      onSubmit={() => null}
-    >
-      <ThemeToggle
-        bodyClassName={styles.fieldset__body}
-        groupClassName={styles.group}
-        legendClassName={styles.label}
-      />
-      <PrismThemeToggle
-        bodyClassName={styles.fieldset__body}
-        groupClassName={styles.group}
-        legendClassName={styles.label}
-      />
-      <MotionToggle
-        defaultValue="on"
-        bodyClassName={styles.fieldset__body}
-        groupClassName={styles.group}
-        legendClassName={styles.label}
-        storageKey={motionStorageKey}
-      />
-      <AckeeToggle
-        defaultValue="full"
-        bodyClassName={styles.fieldset__body}
-        groupClassName={`${styles.group} ${styles['group--ackee']}`}
-        legendClassName={`${styles.label} ${styles['label--ackee']}`}
-        storageKey={ackeeStorageKey}
-        tooltipClassName={`${styles.tooltip} ${tooltipClassName}`}
-      />
-    </Form>
-  );
-};
-
-export default SettingsForm;
diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss
new file mode 100644
index 0000000..fef3492
--- /dev/null
+++ b/src/components/organisms/modals/settings-modal.module.scss
@@ -0,0 +1,46 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/variables" as var;
+
+.wrapper {
+  width: 100%;
+
+  @media screen and (max-height: #{var.get-breakpoint("2xs")}) and (max-width: #{var.get-breakpoint("sm")}) {
+    --first-col-width: #{fun.convert-px(160)};
+    --col-gap: var(--spacing-xl);
+
+    display: grid;
+    grid-template-columns: var(--first-col-width) 1fr;
+    gap: var(--spacing-xl);
+  }
+}
+
+.form {
+  display: flex;
+  flex-flow: row wrap;
+  column-gap: var(--spacing-lg);
+}
+
+.items {
+  margin: 0 0 var(--spacing-2xs);
+  max-width: unset;
+}
+
+.fieldset__body {
+  margin-left: auto;
+}
+
+.tooltip {
+  font-size: var(--font-size-sm);
+  z-index: 2;
+
+  @media screen and (max-height: #{var.get-breakpoint("2xs")}) {
+    width: calc(100vw - var(--spacing-md));
+    padding: var(--spacing-md) var(--spacing-2xs) var(--spacing-2xs)
+      var(--spacing-2xs);
+    right: 0;
+  }
+
+  @media screen and (min-width: #{var.get-breakpoint("sm")}) {
+    width: 100%;
+  }
+}
diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx
index d263e2b..649d68b 100644
--- a/src/components/organisms/modals/settings-modal.stories.tsx
+++ b/src/components/organisms/modals/settings-modal.stories.tsx
@@ -1,3 +1,5 @@
+import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture';
+import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import SettingsModal from './settings-modal';
 
@@ -55,6 +57,9 @@ export default {
       },
     },
   },
+  parameters: {
+    layout: 'fullscreen',
+  },
 } as ComponentMeta<typeof SettingsModal>;
 
 const Template: ComponentStory<typeof SettingsModal> = (args) => (
@@ -65,3 +70,7 @@ const Template: ComponentStory<typeof SettingsModal> = (args) => (
  * Modals Stories - Settings
  */
 export const Settings = Template.bind({});
+Settings.args = {
+  ackeeStorageKey,
+  motionStorageKey,
+};
diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx
index 91f77de..9277067 100644
--- a/src/components/organisms/modals/settings-modal.test.tsx
+++ b/src/components/organisms/modals/settings-modal.test.tsx
@@ -1,14 +1,40 @@
+import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture';
+import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture';
 import { render, screen } from '@tests/utils';
 import SettingsModal from './settings-modal';
 
 describe('SettingsModal', () => {
-  it('renders a fake heading', () => {
+  it('renders the modal heading', () => {
     render(
       <SettingsModal
-        ackeeStorageKey="ackee-tracking"
-        motionStorageKey="reduce-motion"
+        ackeeStorageKey={ackeeStorageKey}
+        motionStorageKey={motionStorageKey}
       />
     );
     expect(screen.getByText(/Settings/i)).toBeInTheDocument();
   });
+
+  it('renders a settings form', () => {
+    render(
+      <SettingsModal
+        ackeeStorageKey={ackeeStorageKey}
+        motionStorageKey={motionStorageKey}
+      />
+    );
+    expect(
+      screen.getByRole('form', { name: /^Settings form/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('radiogroup', { name: /^Theme:/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('radiogroup', { name: /^Code blocks:/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('radiogroup', { name: /^Animations:/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('radiogroup', { name: /^Tracking:/i })
+    ).toBeInTheDocument();
+  });
 });
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index 0ab6b7a..d11dfe7 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -1,23 +1,28 @@
-import Spinner from '@components/atoms/loaders/spinner';
+import Form from '@components/atoms/forms/form';
+import AckeeToggle, {
+  AckeeToggleProps,
+} from '@components/molecules/forms/ackee-toggle';
+import MotionToggle, {
+  MotionToggleProps,
+} from '@components/molecules/forms/motion-toggle';
+import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle';
+import ThemeToggle from '@components/molecules/forms/theme-toggle';
 import Modal, { type ModalProps } from '@components/molecules/modals/modal';
-import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import { type SettingsFormProps } from '../forms/settings-form';
-
-const DynamicSettingsForm = dynamic(
-  () => import('@components/organisms/forms/settings-form'),
-  {
-    loading: () => <Spinner />,
-    ssr: false,
-  }
-);
+import styles from './settings-modal.module.scss';
 
 export type SettingsModalProps = Pick<ModalProps, 'className'> &
-  Pick<
-    SettingsFormProps,
-    'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName'
-  >;
+  Pick<AckeeToggleProps, 'tooltipClassName'> & {
+    /**
+     * The local storage key for Ackee settings.
+     */
+    ackeeStorageKey: AckeeToggleProps['storageKey'];
+    /**
+     * The local storage key for Reduce motion settings.
+     */
+    motionStorageKey: MotionToggleProps['storageKey'];
+  };
 
 /**
  * SettingsModal component
@@ -26,7 +31,9 @@ export type SettingsModalProps = Pick<ModalProps, 'className'> &
  */
 const SettingsModal: FC<SettingsModalProps> = ({
   className = '',
-  ...props
+  ackeeStorageKey,
+  motionStorageKey,
+  tooltipClassName,
 }) => {
   const intl = useIntl();
   const title = intl.formatMessage({
@@ -34,10 +41,51 @@ const SettingsModal: FC<SettingsModalProps> = ({
     description: 'SettingsModal: title',
     id: 'gPfT/K',
   });
+  const ariaLabel = intl.formatMessage({
+    defaultMessage: 'Settings form',
+    id: 'xYNeKX',
+    description: 'SettingsModal: an accessible form name',
+  });
 
   return (
-    <Modal title={title} icon="cogs" className={className}>
-      <DynamicSettingsForm {...props} />
+    <Modal
+      title={title}
+      icon="cogs"
+      className={`${styles.wrapper} ${className}`}
+    >
+      <Form
+        aria-label={ariaLabel}
+        className={styles.form}
+        itemsClassName={styles.items}
+        onSubmit={() => null}
+      >
+        <ThemeToggle
+          bodyClassName={styles.fieldset__body}
+          groupClassName={styles.group}
+          legendClassName={styles.label}
+        />
+        <PrismThemeToggle
+          bodyClassName={styles.fieldset__body}
+          groupClassName={styles.group}
+          legendClassName={styles.label}
+        />
+        <MotionToggle
+          defaultValue="on"
+          bodyClassName={styles.fieldset__body}
+          groupClassName={styles.group}
+          legendClassName={styles.label}
+          storageKey={motionStorageKey}
+        />
+        <AckeeToggle
+          defaultValue="full"
+          bodyClassName={styles.fieldset__body}
+          buttonClassName={styles.btn}
+          groupClassName={`${styles.group} ${styles['group--ackee']}`}
+          legendClassName={`${styles.label} ${styles['label--ackee']}`}
+          storageKey={ackeeStorageKey}
+          tooltipClassName={`${styles.tooltip} ${tooltipClassName}`}
+        />
+      </Form>
     </Modal>
   );
 };
diff --git a/src/components/organisms/toolbar/settings.module.scss b/src/components/organisms/toolbar/settings.module.scss
index 08c8cd4..a46f28c 100644
--- a/src/components/organisms/toolbar/settings.module.scss
+++ b/src/components/organisms/toolbar/settings.module.scss
@@ -1,10 +1,8 @@
 @use "@styles/abstracts/functions" as fun;
 @use "@styles/abstracts/mixins" as mix;
 
-.modal {
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      width: 120%;
-    }
-  }
+.item .tooltip {
+  top: unset;
+  bottom: calc(100% + var(--spacing-2xs));
+  transform-origin: bottom center;
 }
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>
   );
diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss
index ca9cd33..85eeee5 100644
--- a/src/components/organisms/toolbar/toolbar.module.scss
+++ b/src/components/organisms/toolbar/toolbar.module.scss
@@ -1,5 +1,5 @@
 @use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/variables" as var;
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
@@ -8,7 +8,7 @@
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  justify-content: space-around;
+  gap: var(--spacing-sm);
   width: 100%;
   height: var(--toolbar-size);
   position: relative;
@@ -27,72 +27,30 @@
     animation: slide-in-from-bottom 0.8s ease-in-out 0s 1;
   }
 
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      :global {
-        animation: slide-in-from-top 1s ease-in-out 0s 1;
-      }
-    }
-  }
-
-  .modal {
-    &--search,
-    &--settings {
-      @include mix.media("screen") {
-        @include mix.dimensions("sm") {
-          min-width: 32ch;
-        }
-      }
-    }
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      --toolbar-size: #{fun.convert-px(70)};
-    }
+  @media screen and (max-width: #{var.get-breakpoint("sm")}) {
+    justify-content: space-around;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 5;
 
-    @include mix.dimensions(null, "sm") {
+    .modal {
+      width: 100%;
       position: fixed;
-      bottom: 0;
+      top: unset;
       left: 0;
-      z-index: 5;
-
-      .modal {
-        top: unset;
-        bottom: calc(var(--toolbar-size) - #{fun.convert-px(4)});
-        max-height: calc(100vh - var(--toolbar-size));
-      }
-
-      .tooltip {
-        padding: calc(var(--title-height) / 2 + var(--spacing-2xs))
-          var(--spacing-2xs) var(--spacing-2xs);
-        top: unset;
-        bottom: calc(100% + var(--spacing-2xs));
-        transform-origin: bottom right;
-      }
-    }
-
-    @include mix.dimensions("sm", "md") {
-      .modal {
-        top: calc(var(--toolbar-size) + var(--spacing-2xs));
-        bottom: unset;
-      }
+      bottom: calc(var(--toolbar-size) - #{fun.convert-px(4)});
+      max-height: calc(100vh - var(--toolbar-size));
     }
+  }
 
-    @include mix.dimensions("sm") {
-      justify-content: flex-end;
-      gap: var(--spacing-sm);
-
-      .tooltip {
-        transform-origin: top right;
-      }
-    }
+  @media screen and (max-height: #{var.get-breakpoint("2xs")}) {
+    --toolbar-size: #{fun.convert-px(70)};
+  }
 
-    @include mix.dimensions("md") {
-      .tooltip {
-        width: 120%;
-        right: -10%;
-      }
+  @media screen and (min-width: #{var.get-breakpoint("sm")}) {
+    .modal {
+      min-width: fun.convert-px(380);
     }
   }
 }