Remove 'inner-scroll' class on small screen devices to give more room to the scroll

src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts

@@ -1,4 +1,8 @@
 import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 
 @Directive({
     selector: '.inner-scroll'
@@ -8,15 +12,23 @@ export class FuseInnerScrollDirective implements OnInit, OnDestroy
     // Private
     private _parent: any;
     private _grandParent: any;
+    private _unsubscribeAll: Subject<any>;
 
     /**
      * Constructor
+     *
+     * @param {ElementRef} _elementRef
+     * @param {FuseMatchMediaService} _fuseMediaMatchService
+     * @param {Renderer2} _renderer
      */
     constructor(
         private _elementRef: ElementRef,
+        private _fuseMediaMatchService: FuseMatchMediaService,
         private _renderer: Renderer2
     )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -40,8 +52,21 @@ export class FuseInnerScrollDirective implements OnInit, OnDestroy
         // Get the grand parent
         this._grandParent = this._renderer.parentNode(this._parent);
 
-        // Add the inner-scroll class
+        // Register to the media query changes
-        this._renderer.addClass(this._grandParent, 'inner-scroll');
+        this._fuseMediaMatchService.onMediaChange
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((alias) => {
+                console.log(alias);
+
+                if ( alias === 'xs' )
+                {
+                    this._removeClass();
+                }
+                else
+                {
+                    this._addClass();
+                }
+            });
     }
 
     /**
@@ -55,6 +80,36 @@ export class FuseInnerScrollDirective implements OnInit, OnDestroy
             return;
         }
 
+        // Remove the class
+        this._removeClass();
+
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Add the class name
+     *
+     * @private
+     */
+    private _addClass(): void
+    {
+        // Add the inner-scroll class
+        this._renderer.addClass(this._grandParent, 'inner-scroll');
+    }
+
+    /**
+     * Remove the class name
+     * @private
+     */
+    private _removeClass(): void
+    {
+
         // Remove the inner-scroll class
         this._renderer.removeClass(this._grandParent, 'inner-scroll');
     }

src/@fuse/scss/partials/_page-layouts.scss

@@ -552,50 +552,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
     @include media-breakpoint-down('xs') {
 
-        // Activate single-scroll
-        &.carded {
-
-            &.fullwidth {
-
-                > .center {
-                    flex: 1 0 auto;
-                    max-height: none;
-                }
-            }
-
-            &.left-sidenav,
-            &.right-sidenav {
-
-                > mat-sidenav-container {
-                    flex: 1 0 auto;
-                }
-            }
-        }
-
-        &.simple {
-
-            &.fullwidth {
-
-                > .content {
-                    flex: 1 0 auto;
-                }
-            }
-
-            &.left-sidenav,
-            &.right-sidenav {
-
-                > mat-sidenav-container {
-                    flex: 1 0 auto !important;
-
-                    > .mat-sidenav-content,
-                    > .mat-drawer-content {
-                        flex: 1 0 auto;
-                    }
-                }
-            }
-        }
-        // End - Activate single-scroll
-
         // Smaller margins
         &.carded {