From 1ee70464dbae051dd9334683b6f2f3dcc8b217d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 7 Mar 2021 18:08:27 +0100
Subject: [PATCH] Use rem units to define off screen content

Using 10000px means content will be visible on screens with ultra-high
resolution (although I don't think they exist nor will exist anytime
soon).

Having screens in the future with a width of 1000rem is less likely,
since a line with 1000 characters would be pretty much impossible to
read.
---
 app/assets/stylesheets/_consul_settings.scss    | 2 ++
 app/assets/stylesheets/admin/table_actions.scss | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 736433875..2124fa115 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -74,6 +74,8 @@ $input-height:      $line-height * 2;
 
 $icon-width: $line-height * 2;
 
+$off-screen-left: -1000rem;
+
 $sdg-icon-min-width: 40px;
 
 $sdg-colors: (
diff --git a/app/assets/stylesheets/admin/table_actions.scss b/app/assets/stylesheets/admin/table_actions.scss
index 51f1a5ee5..b217105ba 100644
--- a/app/assets/stylesheets/admin/table_actions.scss
+++ b/app/assets/stylesheets/admin/table_actions.scss
@@ -10,7 +10,7 @@
 
     > :first-child {
       @include bottom-tooltip;
-      left: -10000px;
+      left: $off-screen-left;
       opacity: 0;
       transform: translateX(-50%);
       transition: opacity 0.3s, left 0s 0.3s;
@@ -28,7 +28,7 @@
     }
 
     &:not(:focus) > :first-child:hover {
-      left: -10000px;
+      left: $off-screen-left;
     }
 
     &::before {