[ADF-4323] Add style fixes from ACA (#4546)

* [ADF-4323] add style fix for adf-search-sorting-picker

- moved from ACA

* [ADF-4323] use Flex Layout's media query mixin

* [ADF-4323] add style fix for adf-pagination

- moved from ACA

* [ADF-4323] add style fix for adf-version-manager

- which fixed issue [ACA-1750]

* [ADF-4323] remove not used property

* [ADF-4323] remove extra bottom-border

* [ADF-4323] upload-drag-area refactor to scss

* [ADF-4323] add style fix for adf file upload

- from ACA

* [ADF-4323] add style fix for adf-info-drawer

- from ACA

* [ADF-4323] add style fix for adf-toolbar

- from ACA

* [ADF-4323] add style fix for adf-sidenav-layout

- from ACA

* [ADF-4323] add style fix for adf-search-filter

- from ACA

* [ADF-4323] add style fix for adf-upload-drag-area

- from ACA

* [ADF-4323] add style fix for adf-info-drawer

- from ACA

* [ADF-4323] move style fix for adf-manage-versions from demo-shell

* [ADF-4323] use Flex Layout's media query mixin

* [ADF-4323] small fix to remove scrolling

* [ADF-4323] add adf-sidenav-layout host element class

* [ADF-4323] change 'inline' class name to 'adf-toolbar--inline'

- css lint was failing because of old naming

* [ADF-4323] set pagination empty state styling

* [ADF-4323] set pagination border to none

lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -1,18 +1,34 @@
-:host {
-    display: flex;
-    flex: 1;
+@mixin adf-sidenav-layout-theme($theme) {
+    $adf-sidenav-max: 300px !default;
 
     .adf-sidenav-layout {
+        @include flex-column;
         width: 100%;
-        display: flex;
-        flex-direction: column;
 
         .adf-layout__content {
             flex: 1 1 auto;
         }
+
+        router-outlet {
+            flex: 0 0;
+        }
+
+        @include layout-bp(lt-sm) {
+            .mat-drawer {
+                width: calc(-50px + 100vw) !important;
+                max-width: $adf-sidenav-max !important;
+            }
+        }
+
+        .mat-drawer-content {
+            @include flex-column;
+            overflow: auto;
+        }
     }
 
-    router-outlet {
-        flex: 0 0;
+    .mat-drawer-content > div,
+    .mat-drawer-content > div > div {
+        @include flex-column;
+        overflow: auto;
     }
 }