From f71418732e511bfe546bafca494717cc7b765895 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Fri, 27 Jan 2023 06:34:51 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20worker=20section=20margin?=
 =?UTF-8?q?=20and=20reduce=20layout=20shift=20(#1610)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/form/target/details/index.hbs  | 44 +++++++++----------
 .../ordered-series-diagram/index.hbs          | 18 ++++----
 ui/admin/app/styles/app.scss                  | 22 +++++++---
 3 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/ui/admin/app/components/form/target/details/index.hbs b/ui/admin/app/components/form/target/details/index.hbs
index b509150e0..53a5a7881 100644
--- a/ui/admin/app/components/form/target/details/index.hbs
+++ b/ui/admin/app/components/form/target/details/index.hbs
@@ -189,28 +189,28 @@
 
       {{#if this.showDeprecationMessage}}
         <F.Control>
-          <Hds::Alert @color='highlight' @type='inline' as |A|>
-            <A.Title>{{t
-                'resources.target.workers.deprecation_message.title'
-              }}</A.Title>
-            <A.Description>{{t
-                'resources.target.workers.deprecation_message.description'
-              }}</A.Description>
-          </Hds::Alert>
-        </F.Control>
-        <F.Control>
-          <Hds::Form::TextInput::Field
-            @value={{@model.worker_filter}}
-            @isInvalid={{@model.errors.worker_filter}}
-            @type='text'
-            name='worker_filter'
-            disabled={{true}}
-            {{on 'input' (set-from-event @model 'worker_filter')}}
-            as |F|
-          >
-            <F.Label>{{t 'form.worker_filter.label'}}</F.Label>
-            <F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
-          </Hds::Form::TextInput::Field>
+          <div class='migration-wrapper'>
+            <Hds::Alert @color='highlight' @type='inline' as |A|>
+              <A.Title>{{t
+                  'resources.target.workers.deprecation_message.title'
+                }}</A.Title>
+              <A.Description>{{t
+                  'resources.target.workers.deprecation_message.description'
+                }}</A.Description>
+            </Hds::Alert>
+            <Hds::Form::TextInput::Field
+              @value={{@model.worker_filter}}
+              @isInvalid={{@model.errors.worker_filter}}
+              @type='text'
+              name='worker_filter'
+              disabled={{true}}
+              {{on 'input' (set-from-event @model 'worker_filter')}}
+              as |F|
+            >
+              <F.Label>{{t 'form.worker_filter.label'}}</F.Label>
+              <F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
+            </Hds::Form::TextInput::Field>
+          </div>
         </F.Control>
       {{/if}}
 
diff --git a/ui/admin/app/components/ordered-series-diagram/index.hbs b/ui/admin/app/components/ordered-series-diagram/index.hbs
index f6ab9a6c2..e7ce96ed4 100644
--- a/ui/admin/app/components/ordered-series-diagram/index.hbs
+++ b/ui/admin/app/components/ordered-series-diagram/index.hbs
@@ -1,8 +1,10 @@
-<ol ...attributes class='ordered-series-diagram'>
-  {{yield
-    (hash
-      Item=(component 'ordered-series-diagram/item')
-      Group=(component 'ordered-series-diagram/group')
-    )
-  }}
-</ol>
\ No newline at end of file
+<div class='worker-wrapper'>
+  <ol ...attributes class='ordered-series-diagram'>
+    {{yield
+      (hash
+        Item=(component 'ordered-series-diagram/item')
+        Group=(component 'ordered-series-diagram/group')
+      )
+    }}
+  </ol>
+</div>
\ No newline at end of file
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index e370dfa14..29aae66e9 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -667,14 +667,18 @@
 // target worker filters
 .target-workers {
   margin-top: sizing.rems(xxl);
-  margin-bottom: sizing.rems(xxl) + sizing.rems(l);
+  margin-bottom: sizing.rems(xl);
 
   .hds-form-legend {
     font-size: sizing.rems(l) - sizing.rems(xxs); // 20
   }
 
   .hds-alert {
-    margin-bottom: sizing.rems(l);
+    margin-bottom: sizing.rems(l); // 16
+  }
+
+  .migration-wrapper {
+    margin: sizing.rems(m) 0 sizing.rems(m) 0;
   }
 
   // note re Button margin: this is a temp solution,
@@ -692,9 +696,15 @@
       margin-bottom: 1rem;
     }
   }
-}
 
-.target-worker-filter-explainer {
-  min-height: 1rem;
-  margin: 1.125rem 0 1.5rem;
+  .target-worker-filter-explainer {
+    min-height: 4rem; // 1
+  }
+
+  .worker-wrapper {
+    display: flex;
+    align-items: center;
+    min-height: 11rem;
+    margin-top: sizing.rems(xs) - sizing.rems(xxxxs); // 10
+  }
 }