PLT-2395 - Improvements to backstage css

3 files changed, 54 insertions, 2 deletions

diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss
index 1ae4b6b70..3b36fb75f 100644
--- a/webapp/sass/responsive/_desktop.scss
+++ b/webapp/sass/responsive/_desktop.scss
@@ -48,6 +48,11 @@
         }
     }
 
+    .backstage-content {
+        margin: 46px 46px 46px 150px;
+    }
+
+
     .inner-wrap {
         &.move--left {
             .file-overlay {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 4e77849ce..38476485d 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,16 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .backstage-filters {
+        display: block;
+
+        .backstage-filter__search {
+            border-bottom: 1px solid $light-gray;
+            margin: 10px 0;
+            width: 100%;
+        }
+    }
+
     .signup-team__container {
         font-size: 1em;
     }
@@ -675,9 +685,9 @@
     }
 
     .sidebar--right {
-        width: 100%;
-        right: 0;
         @include translate3d(100%, 0, 0);
+        right: 0;
+        width: 100%;
         z-index: 5;
 
         &.move--left {
@@ -853,6 +863,30 @@
 }
 
 @media screen and (max-width: 480px) {
+    .backstage-header {
+        h1 {
+            float: none;
+            margin-bottom: 15px;
+        }
+
+        .add-integrations-link {
+            float: none;
+        }
+    }
+
+    .add-integration {
+        width: 100%;
+    }
+
+    .backstage-list__item {
+        display: block;
+
+        .actions {
+            margin-top: 10px;
+            padding: 0;
+        }
+    }
+
     .modal {
         .settings-modal {
             .settings-table {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 6863e660b..db2a8d7b9 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -15,6 +15,19 @@
         }
     }
 
+    .backstage-content {
+        margin: 30px;
+        max-width: 100%;
+        padding: 0;
+    }
+
+    .backstage-sidebar {
+        height: auto;
+        padding: 30px 15px 0;
+        position: relative;
+        width: 100%;
+    }
+
     .help__format-text {
         display: none;
     }