Merge Boundary UI OSS branch 'main' at commit f7141873

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}}
 

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>
+<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>

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
+  }
 }