From cd15a43b140e866d1121924fbd82156aa5402c92 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 4 May 2022 14:56:47 +0200
Subject: [PATCH] Fix app dashboard padding.

---
 .../dashboard/pages/dashboard-page.component.html         | 2 ++
 .../dashboard/pages/dashboard-page.component.scss         | 8 ++++++++
 .../features/dashboard/pages/dashboard-page.component.ts  | 7 ++++++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/features/dashboard/pages/dashboard-page.component.html b/frontend/src/app/features/dashboard/pages/dashboard-page.component.html
index ae92eaa78..93c77ea41 100644
--- a/frontend/src/app/features/dashboard/pages/dashboard-page.component.html
+++ b/frontend/src/app/features/dashboard/pages/dashboard-page.component.html
@@ -70,6 +70,8 @@
                     </ng-container>
                 </ng-container>
             </gridster-item>
+
+            <div [style.height]="extendedHeight"></div>
         </gridster>
 
         <div class="dashboard-settings" *ngIf="grid">
diff --git a/frontend/src/app/features/dashboard/pages/dashboard-page.component.scss b/frontend/src/app/features/dashboard/pages/dashboard-page.component.scss
index 56777c417..aae31886a 100644
--- a/frontend/src/app/features/dashboard/pages/dashboard-page.component.scss
+++ b/frontend/src/app/features/dashboard/pages/dashboard-page.component.scss
@@ -25,6 +25,14 @@ gridster-item {
     /* stylelint-disable */
     gridster {
         background: none;
+
+        &::after {
+            @include absolute(100%, 0, null, 0);
+            content: '';
+            padding: 0;
+            padding-bottom: var(--gridster-margin);
+            pointer-events: none;
+        }
     }
 
     gridster-item {
diff --git a/frontend/src/app/features/dashboard/pages/dashboard-page.component.ts b/frontend/src/app/features/dashboard/pages/dashboard-page.component.ts
index 3656bf8e7..80f1442d5 100644
--- a/frontend/src/app/features/dashboard/pages/dashboard-page.component.ts
+++ b/frontend/src/app/features/dashboard/pages/dashboard-page.component.ts
@@ -24,6 +24,7 @@ export class DashboardPageComponent extends ResourceOwner implements AfterViewIn
     public selectedApp = this.appsState.selectedApp.pipe(defined());
 
     public isStacked = false;
+    public isScrolled = false;
 
     public storageCurrent?: CurrentStorageDto;
     public storageUsage?: ReadonlyArray<StorageUsagePerDateDto>;
@@ -33,7 +34,7 @@ export class DashboardPageComponent extends ResourceOwner implements AfterViewIn
     public gridConfig?: GridsterItem[];
     public gridOptions = DEFAULT_OPTIONS;
 
-    public isScrolled = false;
+    public extendedHeight: string = '';
 
     public user = this.authState.user?.displayName;
 
@@ -89,6 +90,10 @@ export class DashboardPageComponent extends ResourceOwner implements AfterViewIn
         });
     }
 
+    public ngAfterViewChecked() {
+        this.extendedHeight = `${this.grid.gridRows.length * this.grid.curRowHeight - 10}px`;
+    }
+
     public changeIsStacked(value: boolean) {
         this.localStore.setBoolean(Settings.Local.DASHBOARD_CHART_STACKED, value);