From ab3f53cb270f991675a1725d9b0ddc6466fb126a Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Tue, 4 Aug 2020 21:57:54 -0500
Subject: [PATCH] styles on filter form

---
 app/soapbox/features/filters/index.js | 84 ++++++++++++++-------------
 app/styles/components/filters.scss    | 27 +++++++++
 2 files changed, 71 insertions(+), 40 deletions(-)

diff --git a/app/soapbox/features/filters/index.js b/app/soapbox/features/filters/index.js
index c1a2a66f9..60b406a82 100644
--- a/app/soapbox/features/filters/index.js
+++ b/app/soapbox/features/filters/index.js
@@ -139,22 +139,24 @@ class Filters extends ImmutablePureComponent {
           <div className='filter-settings-panel'>
             <fieldset disabled={false}>
               <FieldsGroup>
-
-                <SimpleInput
-                  label={intl.formatMessage(messages.keyword)}
-                  required
-                  type='text'
-                  name='phrase'
-                  onChange={this.handleInputChange}
-                />
-
-                <SelectDropdown
-                  label={intl.formatMessage(messages.expires)}
-                  hint={intl.formatMessage(messages.expires_hint)}
-                  items={expirations}
-                  defaultValue={expirations.never}
-                  onChange={this.handleSelectChange}
-                />
+                <div className='two-col'>
+                  <SimpleInput
+                    label={intl.formatMessage(messages.keyword)}
+                    required
+                    type='text'
+                    name='phrase'
+                    onChange={this.handleInputChange}
+                  />
+                  <div className='input with_label required'>
+                    <SelectDropdown
+                      label={intl.formatMessage(messages.expires)}
+                      hint={intl.formatMessage(messages.expires_hint)}
+                      items={expirations}
+                      defaultValue={expirations.never}
+                      onChange={this.handleSelectChange}
+                    />
+                  </div>
+                </div>
               </FieldsGroup>
 
               <FieldsGroup>
@@ -164,30 +166,32 @@ class Filters extends ImmutablePureComponent {
                 <span className='hint'>
                   <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
                 </span>
-                <Checkbox
-                  label={intl.formatMessage(messages.home_timeline)}
-                  name='home_timeline'
-                  checked={this.state.home_timeline}
-                  onChange={this.handleCheckboxChange}
-                />
-                <Checkbox
-                  label={intl.formatMessage(messages.public_timeline)}
-                  name='public_timeline'
-                  checked={this.state.public_timeline}
-                  onChange={this.handleCheckboxChange}
-                />
-                <Checkbox
-                  label={intl.formatMessage(messages.notifications)}
-                  name='notifications'
-                  checked={this.state.notifications}
-                  onChange={this.handleCheckboxChange}
-                />
-                <Checkbox
-                  label={intl.formatMessage(messages.conversations)}
-                  name='conversations'
-                  checked={this.state.conversations}
-                  onChange={this.handleCheckboxChange}
-                />
+                <div className='two-col'>
+                  <Checkbox
+                    label={intl.formatMessage(messages.home_timeline)}
+                    name='home_timeline'
+                    checked={this.state.home_timeline}
+                    onChange={this.handleCheckboxChange}
+                  />
+                  <Checkbox
+                    label={intl.formatMessage(messages.public_timeline)}
+                    name='public_timeline'
+                    checked={this.state.public_timeline}
+                    onChange={this.handleCheckboxChange}
+                  />
+                  <Checkbox
+                    label={intl.formatMessage(messages.notifications)}
+                    name='notifications'
+                    checked={this.state.notifications}
+                    onChange={this.handleCheckboxChange}
+                  />
+                  <Checkbox
+                    label={intl.formatMessage(messages.conversations)}
+                    name='conversations'
+                    checked={this.state.conversations}
+                    onChange={this.handleCheckboxChange}
+                  />
+                </div>
 
               </FieldsGroup>
 
diff --git a/app/styles/components/filters.scss b/app/styles/components/filters.scss
index 9b99437f2..de1e6ee96 100644
--- a/app/styles/components/filters.scss
+++ b/app/styles/components/filters.scss
@@ -13,7 +13,34 @@
     &:last-child {
       border-bottom: 0;
     }
+  }
 
+  .fields-group .two-col {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    div.input {
+      width: 45%;
+      margin-right: 20px;
+
+      .label_input {
+        width: 100%;
+      }
+    }
+
+    @media(max-width: 485px){
+      div.input {
+        width: 100%;
+        margin-right: 5px;
+
+        .label_input {
+          width: auto;
+        }
+      }
+    }
   }
 
   .filter__container {