From 19c15695383f23bef0c29c6821747ba6e5f709d3 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Wed, 7 Feb 2024 10:33:05 -0800
Subject: [PATCH] UI: Fix setup flow alignment (#16585)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #16569
Before:
![Screenshot 2024-02-02 at 5 07
00 PM](https://github.com/fleetdm/fleet/assets/61553566/03e27bef-95ad-41b0-ae02-1211ae2d872a)

Now:

![Screenshot-2024-02-02-at-51559PM](https://github.com/fleetdm/fleet/assets/61553566/81100872-c322-413c-acef-842f60306416)


## Checklist for submitter
- [x] Checked on Chrome, Firefox, Safari
- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/16569-setup-flow-alignment            |  1 +
 .../RegistrationPage/Breadcrumbs/_styles.scss | 24 +++++++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 changes/16569-setup-flow-alignment

diff --git a/changes/16569-setup-flow-alignment b/changes/16569-setup-flow-alignment
new file mode 100644
index 0000000000..3b8b317bfd
--- /dev/null
+++ b/changes/16569-setup-flow-alignment
@@ -0,0 +1 @@
+* Fix a small alignment bug in the setup flow
diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
index 0d96390fce..97b54005d6 100644
--- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
+++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
@@ -1,8 +1,7 @@
 .registration-breadcrumbs {
   display: flex;
   justify-content: space-between;
-  align-content: center;
-  width: 600px;
+  width: 652px;
   height: 125px;
   margin: 38px auto 0;
 
@@ -12,7 +11,7 @@
 
   &__page {
     text-align: center;
-    width: 156px;
+    min-width: 156px;
     font-size: $small;
     font-weight: $regular;
     color: $core-white;
@@ -21,18 +20,29 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    width: 100%;
 
+    // line after breadcrumb
     &::before {
       content: "";
       position: absolute;
-      width: 197px;
+      width: 88.5%;
       height: 2px;
       background-color: $core-vibrant-blue;
-      bottom: 46px;
-      left: 90px;
+      bottom: 36%;
+      left: 121px;
+
+      // Firefox-specific
+      @-moz-document url-prefix() {
+        bottom: 38.2%;
+      }
 
       @include breakpoint(tablet) {
-        bottom: 21px;
+        bottom: 26.5%;
+        // Firefox-specific
+        @-moz-document url-prefix() {
+          bottom: 30%;
+        }
       }
     }