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, 46 insertions, 0 deletions

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%;
+  }
+}