From a17c23afe77a177a4b6c2050f774697e8faee2f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Wed, 29 Dec 2021 11:47:13 +0100
Subject: [PATCH] Make first segment form column narrower

[MAILPOET-4039]
---
 assets/css/src/components-plugin/_segments.scss | 7 ++++++-
 assets/js/src/segments/dynamic/form.tsx         | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/css/src/components-plugin/_segments.scss b/assets/css/src/components-plugin/_segments.scss
index c8e9882875..5d2d0953bf 100644
--- a/assets/css/src/components-plugin/_segments.scss
+++ b/assets/css/src/components-plugin/_segments.scss
@@ -5,9 +5,14 @@
   grid-column: span 2;
 }
 
-.mailpoet-segments-segments-section .mailpoet-grid-three-columns {
+.mailpoet-segments-grid {
+  grid-template-columns: 200px 1fr 1fr;
   padding-right: $grid-gap-large;
   position: relative;
+
+  @include respond-to(small-screen) {
+    grid-template-columns: 1fr;
+  }
 }
 
 .mailpoet-segments-description-section .mailpoet-form-textarea textarea {
diff --git a/assets/js/src/segments/dynamic/form.tsx b/assets/js/src/segments/dynamic/form.tsx
index 1d57968428..575ed61c44 100644
--- a/assets/js/src/segments/dynamic/form.tsx
+++ b/assets/js/src/segments/dynamic/form.tsx
@@ -126,7 +126,7 @@ export const Form: React.FunctionComponent<Props> = ({
           <FiltersBefore />
           {Array.isArray(filterRows) && filterRows.map((filterRow, index) => (
             <React.Fragment key={filterRow.index}>
-              <Grid.ThreeColumns automationId={`filter-row-${index}`}>
+              <Grid.ThreeColumns className="mailpoet-segments-grid" automationId={`filter-row-${index}`}>
                 <FilterBefore filterRows={filterRows} index={index} />
                 <Grid.CenteredRow>
                   <Select