Multiple UI changes (#2699)

* Adding the sidebar fix

* Fixing inner-wrap before outside the app

* PLT-2560 - Fixing userlist in system console

* Removing sidebar stuff

2 files changed, 79 insertions, 77 deletions

diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 22317a156..aea8ac272 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -441,87 +441,87 @@
         }
     }
 
-    .more-modal__list {
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
+}
 
-        .popover & {
-            font-size: .95em;
+.more-modal__list {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 
-            .more-modal__row {
-                padding: 5px 10px;
-            }
+    .popover & {
+        font-size: .95em;
 
-            .more-modal__name {
-                font-weight: normal;
-            }
-        }
-
-        .more-modal__image {
-            @include border-radius(60px);
-            flex-grow: 0;
-            flex-shrink: 0;
-            margin-right: 8px;
+        .more-modal__row {
+            padding: 5px 10px;
         }
 
-        .more-modal__details {
-            flex-grow: 1;
-            flex-shrink: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
+        .more-modal__name {
+            font-weight: normal;
         }
+    }
 
-        .more-modal__actions {
-            flex-grow: 0;
-            flex-shrink: 0;
-            padding-left: 20px;
-        }
+    .more-modal__image {
+        @include border-radius(60px);
+        flex-grow: 0;
+        flex-shrink: 0;
+        margin-right: 8px;
+    }
 
-        .more-modal__name {
-            font-size: .95em;
-            font-weight: 600;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
+    .more-modal__details {
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 
-        .more-modal__description {
-            @include opacity(.7);
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
+    .more-modal__actions {
+        flex-grow: 0;
+        flex-shrink: 0;
+        padding-left: 20px;
+    }
 
-        .more-modal__row {
-            border-bottom: 1px solid $light-gray;
-            display: flex;
-            padding: 8px 15px;
-        }
+    .more-modal__name {
+        font-size: .95em;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 
-        p {
-            @include opacity(.8);
-            font-size: .9em;
-            margin: 5px 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+    .more-modal__description {
+        @include opacity(.7);
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
-    .filtered-user-list {
+    .more-modal__row {
+        border-bottom: 1px solid $light-gray;
         display: flex;
-        flex-direction: column;
+        padding: 8px 15px;
+    }
 
-        .filter-row {
-            flex-grow: 0;
-            flex-shrink: 0;
-        }
+    p {
+        @include opacity(.8);
+        font-size: .9em;
+        margin: 5px 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
 
-        .user-list {
-            flex-grow: 1;
-            flex-shrink: 1;
-        }
+.filtered-user-list {
+    display: flex;
+    flex-direction: column;
+
+    .filter-row {
+        flex-grow: 0;
+        flex-shrink: 0;
     }
 
-}
+    .user-list {
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+}
\ No newline at end of file
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 21c3135c2..3d30f6d96 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -739,17 +739,19 @@
     .inner-wrap {
         @include single-transition(all, .5s, ease);
 
-        &:before {
-            //Some trickery in order for the z-index transition to happen immediately on move-in and delayed on move-out.
-            background-color: transparent;
-            content: '';
-            height: 100%;
-            left: -15px;
-            position: absolute;
-            top: 0;
-            transition: background-color 0.5s ease, z-index 0s ease 0.5s;
-            width: calc(100% + 30px);
-            z-index: 0;
+        .app__body & {
+            &:before {
+                //Some trickery in order for the z-index transition to happen immediately on move-in and delayed on move-out.
+                background-color: transparent;
+                content: '';
+                height: 100%;
+                left: -15px;
+                position: absolute;
+                top: 0;
+                transition: background-color 0.5s ease, z-index 0s ease 0.5s;
+                width: calc(100% + 30px);
+                z-index: 0;
+            }
         }
 
         &.move--right {