From a52b669af3de6912791770184d777030d75d9fcc Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel.dohnal@automattic.com>
Date: Mon, 29 Nov 2021 15:27:05 +0100
Subject: [PATCH] Make the fields the same width

[MAILPOET-3502]
---
 .../subscriber_subscribed_to_list.tsx         | 74 ++++++++++---------
 assets/js/src/segments/dynamic/form.tsx       | 30 ++++----
 2 files changed, 56 insertions(+), 48 deletions(-)

diff --git a/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx b/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx
index e6e260e467..a41a2d5c74 100644
--- a/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx
+++ b/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx
@@ -4,6 +4,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 import MailPoet from 'mailpoet';
 import Select from 'common/form/select/select';
+import { Grid } from 'common/grid';
 import ReactSelect from 'common/form/react_select/react_select';
 
 import {
@@ -61,40 +62,45 @@ export const SubscribedToList: React.FunctionComponent<Props> = ({ filterIndex }
 
   return (
     <>
-      <Select
-        key="select"
-        value={segment.operator}
-        onChange={(e) => {
-          updateSegmentFilterFromEvent('operator', filterIndex, e);
-        }}
-      >
-        <option value={AnyValueTypes.ANY}>{MailPoet.I18n.t('anyOf')}</option>
-        <option value={AnyValueTypes.ALL}>{MailPoet.I18n.t('allOf')}</option>
-        <option value={AnyValueTypes.NONE}>{MailPoet.I18n.t('noneOf')}</option>
-      </Select>
-      <ReactSelect
-        dimension="small"
-        isFullWidth
-        isMulti
-        placeholder={MailPoet.I18n.t('searchLists')}
-        options={options}
-        value={
-          filter(
-            (option) => {
-              if (!segment.segments) return undefined;
-              const segmentId = option.value;
-              return segment.segments.indexOf(segmentId) !== -1;
-            },
-            options
-          )
-        }
-        onChange={(options: SelectOption[]): void => {
-          updateSegmentFilter(
-            { segments: map('value', options) },
-            filterIndex
-          );
-        }}
-      />
+      <Grid.CenteredRow>
+        <Select
+          key="select"
+          isFullWidth
+          value={segment.operator}
+          onChange={(e) => {
+            updateSegmentFilterFromEvent('operator', filterIndex, e);
+          }}
+        >
+          <option value={AnyValueTypes.ANY}>{MailPoet.I18n.t('anyOf')}</option>
+          <option value={AnyValueTypes.ALL}>{MailPoet.I18n.t('allOf')}</option>
+          <option value={AnyValueTypes.NONE}>{MailPoet.I18n.t('noneOf')}</option>
+        </Select>
+      </Grid.CenteredRow>
+      <Grid.CenteredRow>
+        <ReactSelect
+          dimension="small"
+          isFullWidth
+          isMulti
+          placeholder={MailPoet.I18n.t('searchLists')}
+          options={options}
+          value={
+            filter(
+              (option) => {
+                if (!segment.segments) return undefined;
+                const segmentId = option.value;
+                return segment.segments.indexOf(segmentId) !== -1;
+              },
+              options
+            )
+          }
+          onChange={(options: SelectOption[]): void => {
+            updateSegmentFilter(
+              { segments: map('value', options) },
+              filterIndex
+            );
+          }}
+        />
+      </Grid.CenteredRow>
     </>
   );
 };
diff --git a/assets/js/src/segments/dynamic/form.tsx b/assets/js/src/segments/dynamic/form.tsx
index 2340e2a337..4696475cca 100644
--- a/assets/js/src/segments/dynamic/form.tsx
+++ b/assets/js/src/segments/dynamic/form.tsx
@@ -135,20 +135,22 @@ export const Form: React.FunctionComponent<Props> = ({
                     {MinusIcon}
                   </a>
                 )}
-                <Select
-                  dimension="small"
-                  placeholder={MailPoet.I18n.t('selectActionPlaceholder')}
-                  options={segmentFilters}
-                  value={filterRow.filterValue}
-                  onChange={(newValue: FilterValue): void => {
-                    updateSegmentFilter({
-                      segmentType: newValue.group,
-                      action: newValue.value,
-                    }, index);
-                  }}
-                  automationId="select-segment-action"
-                  isFullWidth
-                />
+                <Grid.CenteredRow>
+                  <Select
+                    dimension="small"
+                    placeholder={MailPoet.I18n.t('selectActionPlaceholder')}
+                    options={segmentFilters}
+                    value={filterRow.filterValue}
+                    onChange={(newValue: FilterValue): void => {
+                      updateSegmentFilter({
+                        segmentType: newValue.group,
+                        action: newValue.value,
+                      }, index);
+                    }}
+                    automationId="select-segment-action"
+                    isFullWidth
+                  />
+                </Grid.CenteredRow>
                 {filterRow.index !== undefined && (
                   <FormFilterFields filterIndex={filterRow.index} />
                 )}