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

webapp/sass/components/_modal.scss

@@ -441,87 +441,87 @@
         }
     }
 
-    .more-modal__list {
+}
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
 
-        .popover & {
+.more-modal__list {
-            font-size: .95em;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 
-            .more-modal__row {
+    .popover & {
-                padding: 5px 10px;
+        font-size: .95em;
-            }
 
-            .more-modal__name {
+        .more-modal__row {
-                font-weight: normal;
+            padding: 5px 10px;
-            }
-        }
-
-        .more-modal__image {
-            @include border-radius(60px);
-            flex-grow: 0;
-            flex-shrink: 0;
-            margin-right: 8px;
-        }
-
-        .more-modal__details {
-            flex-grow: 1;
-            flex-shrink: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .more-modal__actions {
-            flex-grow: 0;
-            flex-shrink: 0;
-            padding-left: 20px;
         }
 
         .more-modal__name {
-            font-size: .95em;
+            font-weight: normal;
-            font-weight: 600;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .more-modal__description {
-            @include opacity(.7);
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .more-modal__row {
-            border-bottom: 1px solid $light-gray;
-            display: flex;
-            padding: 8px 15px;
-        }
-
-        p {
-            @include opacity(.8);
-            font-size: .9em;
-            margin: 5px 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
         }
     }
 
-    .filtered-user-list {
+    .more-modal__image {
+        @include border-radius(60px);
+        flex-grow: 0;
+        flex-shrink: 0;
+        margin-right: 8px;
+    }
+
+    .more-modal__details {
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .more-modal__actions {
+        flex-grow: 0;
+        flex-shrink: 0;
+        padding-left: 20px;
+    }
+
+    .more-modal__name {
+        font-size: .95em;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .more-modal__description {
+        @include opacity(.7);
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .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;
-        }
-
-        .user-list {
-            flex-grow: 1;
-            flex-shrink: 1;
-        }
     }
 
+    p {
+        @include opacity(.8);
+        font-size: .9em;
+        margin: 5px 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
+
+.filtered-user-list {
+    display: flex;
+    flex-direction: column;
+
+    .filter-row {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .user-list {
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+}

webapp/sass/responsive/_mobile.scss

@@ -739,17 +739,19 @@
     .inner-wrap {
         @include single-transition(all, .5s, ease);
 
-        &:before {
+        .app__body & {
-            //Some trickery in order for the z-index transition to happen immediately on move-in and delayed on move-out.
+            &:before {
-            background-color: transparent;
+                //Some trickery in order for the z-index transition to happen immediately on move-in and delayed on move-out.
-            content: '';
+                background-color: transparent;
-            height: 100%;
+                content: '';
-            left: -15px;
+                height: 100%;
-            position: absolute;
+                left: -15px;
-            top: 0;
+                position: absolute;
-            transition: background-color 0.5s ease, z-index 0s ease 0.5s;
+                top: 0;
-            width: calc(100% + 30px);
+                transition: background-color 0.5s ease, z-index 0s ease 0.5s;
-            z-index: 0;
+                width: calc(100% + 30px);
+                z-index: 0;
+            }
         }
 
         &.move--right {