diff --git a/assets/css/src/components-plugin/_feature-announcement.scss b/assets/css/src/components-plugin/_feature-announcement.scss
index b865ca1726..eed2e483c9 100644
--- a/assets/css/src/components-plugin/_feature-announcement.scss
+++ b/assets/css/src/components-plugin/_feature-announcement.scss
@@ -4,8 +4,13 @@
.button.mailpoet_feature_announcement_button {
height: 28px;
+ min-height: auto;
padding: 0 5px 1px;
position: relative;
+
+ @include respond-to(small-screen) {
+ margin-top: 10px;
+ }
}
.mailpoet_feature_announcement_icon {
diff --git a/assets/css/src/components-plugin/_listing-newsletters.scss b/assets/css/src/components-plugin/_listing-newsletters.scss
index 710fe0f686..eeba065961 100644
--- a/assets/css/src/components-plugin/_listing-newsletters.scss
+++ b/assets/css/src/components-plugin/_listing-newsletters.scss
@@ -153,3 +153,9 @@ h1.title.mailpoet-newsletter-listing-heading {
stroke: $color-secondary;
stroke-width: 2px;
}
+
+@include respond-to(small-screen) {
+ .mailpoet-newsletter-listing-heading-wrapper {
+ float: left;
+ }
+}
diff --git a/assets/css/src/components-plugin/_listing.scss b/assets/css/src/components-plugin/_listing.scss
index a7ce1bcbad..6ad0132d5e 100644
--- a/assets/css/src/components-plugin/_listing.scss
+++ b/assets/css/src/components-plugin/_listing.scss
@@ -251,8 +251,47 @@ div.mailpoet-listing-bulk-actions-container {
}
}
-.mailpoet-listing-mobile-search-holder {
- @include respond-to(small-screen) {
- height: 100px;
+.mailpoet-listing-footer {
+ background-color: $color-white;
+}
+
+@include respond-to(small-screen) {
+ .mailpoet-listing {
+ padding: 0;
+ }
+
+ .mailpoet-listing-header {
+ display: none;
+ }
+
+ .mailpoet-listing-pages {
+ float: none;
+ text-align: center;
+ }
+
+ tr.mailpoet-listing-actions-and-select-all-row {
+ display: none;
+ }
+
+ .mailpoet-listing-table {
+ .mailpoet-listing & {
+ border-top: 0;
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+
+ thead,
+ .mailpoet-listing-check-column {
+ display: none;
+ }
+ }
+
+ .mailpoet-listing-footer {
+ margin: 0 0 - $grid-gap;
+ padding-top: $grid-gap;
+ }
+
+ .mailpoet-listing-mobile-search-holder {
+ display: none;
}
}
diff --git a/assets/css/src/components/_tabs.scss b/assets/css/src/components/_tabs.scss
index 7c728d3278..2270634e1e 100644
--- a/assets/css/src/components/_tabs.scss
+++ b/assets/css/src/components/_tabs.scss
@@ -2,13 +2,6 @@
clear: both;
position: relative;
z-index: 1;
-
- @include respond-to(small-screen) {
- p.search-box {
- left: $grid-gap;
- width: calc(100% - 2 * #{$grid-gap});
- }
- }
}
.mailpoet-tabs-is-open {
@@ -106,6 +99,11 @@
}
@include respond-to(small-screen) {
+ .mailpoet-tabs {
+ margin-left: -10px;
+ margin-right: -12px;
+ }
+
.mailpoet-tabs-title {
background: $color-white;
border: 1px solid $color-tertiary-light;
@@ -154,5 +152,6 @@
.mailpoet-tab-content {
border-radius: 0;
+ padding-top: 0;
}
}
diff --git a/assets/js/src/listing/listing.jsx b/assets/js/src/listing/listing.jsx
index c6c357aac6..fbcf4482b6 100644
--- a/assets/js/src/listing/listing.jsx
+++ b/assets/js/src/listing/listing.jsx
@@ -593,24 +593,26 @@ class Listing extends React.Component {
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
{ this.state.meta.mta_method &&