From cf340f48c3582f3e96f7b2dc16c11f44b7661363 Mon Sep 17 00:00:00 2001
From: Benedict Aas <x@shou.io>
Date: Fri, 23 Mar 2018 17:33:30 +0000
Subject: [PATCH] fix(GUI): fix status dots to their position

We ensure the status dots don't move about and stick to their position
by using absolute positioning relative to its parent element.

Change-Type: patch
Changelog-Entry: Fix status dots to their position.
---
 lib/gui/app/pages/main/styles/_main.scss | 11 ++++++++++-
 lib/gui/css/main.css                     | 10 +++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss
index 8a00fa91..b1ede1ef 100644
--- a/lib/gui/app/pages/main/styles/_main.scss
+++ b/lib/gui/app/pages/main/styles/_main.scss
@@ -74,11 +74,14 @@ svg-icon > img[disabled] {
 }
 
 .page-main .step-footer-split {
+  position: absolute;
+  top: 39px;
+  left: 28px;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   justify-content: space-between;
-  max-width: $btn-min-width;
+  width: $btn-min-width;
 }
 
 .page-main .step-footer-underline {
@@ -108,6 +111,8 @@ svg-icon > img[disabled] {
 
 .target-status-wrap {
   display: flex;
+  position: absolute;
+  top: 62px;
   flex-direction: column;
   margin: 8px 28px;
   align-items: flex-start;
@@ -153,3 +158,7 @@ svg-icon > img[disabled] {
 .tooltip-inner {
   white-space: pre-line;
 }
+
+.space-vertical-large {
+  position: relative;
+}
diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css
index 7da0785c..64841c94 100644
--- a/lib/gui/css/main.css
+++ b/lib/gui/css/main.css
@@ -6543,11 +6543,14 @@ svg-icon > img[disabled] {
   font-size: 10px; }
 
 .page-main .step-footer-split {
+  position: absolute;
+  top: 39px;
+  left: 28px;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   justify-content: space-between;
-  max-width: 170px; }
+  width: 170px; }
 
 .page-main .step-footer-underline {
   border-bottom: 1px dotted;
@@ -6571,6 +6574,8 @@ svg-icon > img[disabled] {
 
 .target-status-wrap {
   display: flex;
+  position: absolute;
+  top: 62px;
   flex-direction: column;
   margin: 8px 28px;
   align-items: flex-start; }
@@ -6603,6 +6608,9 @@ svg-icon > img[disabled] {
 .tooltip-inner {
   white-space: pre-line; }
 
+.space-vertical-large {
+  position: relative; }
+
 /*
  * Copyright 2016 resin.io
  *