From cfdddac43f10d06a8b0e9bcf69dc0ce77ce16649 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 8 Jun 2022 19:06:27 +0200
Subject: 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.
---
 .../organisms/modals/settings-modal.module.scss    | 46 ++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/components/organisms/modals/settings-modal.module.scss

(limited to 'src/components/organisms/modals/settings-modal.module.scss')

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%;
+  }
+}
-- 
cgit v1.2.3