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

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index 79824dd..9620fa0 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -45,6 +45,20 @@ $breakpoints: (
   "lg": fun.convert-px(1600, "em"),
 );
 
+// I cannot declare the following function with others functions due to module
+// loop. But, it will only be used in this file so it is not really a problem.
+
+/// Get breakpoint
+/// @param {String} $name - Breakpoint name.
+/// @return {String} The breakpoint value.
+@function get-breakpoint($breakpoint) {
+  @if type-of($breakpoint) == "string" {
+    @return map.get($breakpoints, $breakpoint);
+  } @else {
+    @error "`$breakpoint` must be a string.";
+  }
+}
+
 //===========================================================================
 // Fonts
 //===========================================================================