Minor styles improvements

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/filters/index.js

@@ -215,54 +215,50 @@ class Filters extends ImmutablePureComponent {
 
             <Button className='button button-primary setup' text={intl.formatMessage(messages.add_new)} onClick={this.handleAddNew} />
 
-            <ColumnSubheading text={intl.formatMessage(messages.subheading_filters)} />
-
-            <ScrollableList
-              scrollKey='filters'
-              emptyMessage={emptyMessage}
-            >
-              {filters.map((filter, i) => (
-                <div key={i} className='filter__container'>
-                  <div className='filter__details'>
-                    <div className='filter__phrase'>
-                      <span className='filter__list-label'><FormattedMessage id='filters.filters_list_phrase_label' defaultMessage='Keyword or phrase:' /></span>
-                      <span className='filter__list-value'>{filter.get('phrase')}</span>
-                    </div>
-                    <div className='filter__contexts'>
-                      <span className='filter__list-label'><FormattedMessage id='filters.filters_list_context_label' defaultMessage='Filter contexts:' /></span>
-                      <span className='filter__list-value'>
-                        {filter.get('context').map((context, i) => (
-                          <span key={i} className='context'>{context}</span>
-                        ))}
-                      </span>
-                    </div>
-                    <div className='filter__details'>
-                      <span className='filter__list-label'><FormattedMessage id='filters.filters_list_details_label' defaultMessage='Filter settings:' /></span>
-                      <span className='filter__list-value'>
-                        {filter.get('irreversible') ?
-                          <span><FormattedMessage id='filters.filters_list_drop' defaultMessage='Drop' /></span> :
-                          <span><FormattedMessage id='filters.filters_list_hide' defaultMessage='Hide' /></span>
-                        }
-                        {filter.get('whole_word') &&
-                          <span><FormattedMessage id='filters.filters_list_whole-word' defaultMessage='Whole word' /></span>
-                        }
-                      </span>
-                    </div>
-                  </div>
-                  <div className='filter__delete' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={filter.get('id')} aria-label={intl.formatMessage(messages.delete)}>
-                    <Icon className='filter__delete-icon' id='times' size={40} />
-                    <span className='filter__delete-label'><FormattedMessage id='filters.filters_list_delete' defaultMessage='Delete' /></span>
-                  </div>
-                </div>
-              ))}
-            </ScrollableList>
-
           </div>
         </SimpleForm>
 
+        <ColumnSubheading text={intl.formatMessage(messages.subheading_filters)} />
 
-
+        <ScrollableList
-
+          scrollKey='filters'
+          emptyMessage={emptyMessage}
+        >
+          {filters.map((filter, i) => (
+            <div key={i} className='filter__container'>
+              <div className='filter__details'>
+                <div className='filter__phrase'>
+                  <span className='filter__list-label'><FormattedMessage id='filters.filters_list_phrase_label' defaultMessage='Keyword or phrase:' /></span>
+                  <span className='filter__list-value'>{filter.get('phrase')}</span>
+                </div>
+                <div className='filter__contexts'>
+                  <span className='filter__list-label'><FormattedMessage id='filters.filters_list_context_label' defaultMessage='Filter contexts:' /></span>
+                  <span className='filter__list-value'>
+                    {filter.get('context').map((context, i) => (
+                      <span key={i} className='context'>{context}</span>
+                    ))}
+                  </span>
+                </div>
+                <div className='filter__details'>
+                  <span className='filter__list-label'><FormattedMessage id='filters.filters_list_details_label' defaultMessage='Filter settings:' /></span>
+                  <span className='filter__list-value'>
+                    {filter.get('irreversible') ?
+                      <span><FormattedMessage id='filters.filters_list_drop' defaultMessage='Drop' /></span> :
+                      <span><FormattedMessage id='filters.filters_list_hide' defaultMessage='Hide' /></span>
+                    }
+                    {filter.get('whole_word') &&
+                      <span><FormattedMessage id='filters.filters_list_whole-word' defaultMessage='Whole word' /></span>
+                    }
+                  </span>
+                </div>
+              </div>
+              <div className='filter__delete' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={filter.get('id')} aria-label={intl.formatMessage(messages.delete)}>
+                <Icon className='filter__delete-icon' id='times' size={40} />
+                <span className='filter__delete-label'><FormattedMessage id='filters.filters_list_delete' defaultMessage='Delete' /></span>
+              </div>
+            </div>
+          ))}
+        </ScrollableList>
       </Column>
     );
   }

app/soapbox/features/list_adder/index.js

@@ -69,7 +69,7 @@ class ListAdder extends ImmutablePureComponent {
     const { accountId, listIds, intl } = this.props;
 
     return (
-      <div className='modal-root__modal compose-modal'>
+      <div className='modal-root__modal compose-modal list-editor__content'>
         <div className='compose-modal__header'>
           <h3 className='compose-modal__header__title'>
             <FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' />

app/soapbox/features/list_editor/index.js

@@ -70,7 +70,7 @@ class ListEditor extends ImmutablePureComponent {
           </h3>
           <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
         </div>
-        <div className='compose-modal__content'>
+        <div className='compose-modal__content list-editor__content'>
           <div className='list-editor'>
             <ColumnSubheading text={intl.formatMessage(messages.changeTitle)} />
             <EditListForm />

app/styles/components/list-forms.scss

@@ -14,6 +14,10 @@
     border-radius: 8px 8px 0 0;
   }
 
+  &__content {
+    padding: 0;
+  }
+
   &__accounts {
     background: var(--background-color);
     overflow-y: auto;
@@ -33,7 +37,7 @@
   .search {
     display: flex;
     flex-direction: row;
-    margin: 10px 0;
+    margin: 10px;
 
     > label {
       flex: 1 1;

app/styles/ui.scss

@@ -246,6 +246,10 @@
   }
 }
 
+article:last-child > .domain {
+  border-bottom: none;
+}
+
 .domain__wrapper {
   display: flex;
 }