feat: make dashboard scrollable (#7662)

vaadin · Aug 16, 2024 · d0dc816 · d0dc816
1 parent 3c451c6
commit d0dc816
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
@@ -22,7 +22,6 @@ export const DashboardLayoutMixin = (superClass) =>
     static get styles() {
       return css`
         :host {
-          display: grid;
           /* Default min and max column widths */
           --_vaadin-dashboard-default-col-min-width: 25rem;
           --_vaadin-dashboard-default-col-max-width: 1fr;
@@ -36,6 +35,9 @@ export const DashboardLayoutMixin = (superClass) =>
             var(--_vaadin-dashboard-default-col-max-width)
           );
 
+          display: grid;
+          overflow: auto;
+
           grid-template-columns: repeat(
             auto-fill,
             minmax(var(--_vaadin-dashboard-col-min-width), var(--_vaadin-dashboard-col-max-width))
@@ -44,6 +46,10 @@ export const DashboardLayoutMixin = (superClass) =>
           gap: var(--vaadin-dashboard-gap, 1rem);
         }
 
+        :host([hidden]) {
+          display: none !important;
+        }
+
         ::slotted(*) {
           grid-column: span min(var(--vaadin-dashboard-item-colspan, 1), var(--_vaadin-dashboard-item-max-colspan));
         }

diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
@@ -80,6 +80,12 @@ describe('dashboard layout', () => {
     ]);
   });
 
+  it('should not display when hidden', () => {
+    expect(dashboard.offsetHeight).to.be.above(0);
+    dashboard.hidden = true;
+    expect(dashboard.offsetHeight).to.eql(0);
+  });
+
   it('should be responsive', () => {
     // Narrow down the component to fit one column
     dashboard.style.width = `${columnWidth}px`;
@@ -91,6 +97,16 @@ describe('dashboard layout', () => {
     ]);
   });
 
+  it('should scroll when content overflows', () => {
+    dashboard.style.width = `${columnWidth}px`;
+    const rowHeight = Math.ceil(getRowHeights(dashboard)[0]);
+    dashboard.style.height = `${rowHeight}px`;
+    expect(dashboard.scrollTop).to.eql(0);
+
+    dashboard.scrollTop = 1;
+    expect(dashboard.scrollTop).to.eql(1);
+  });
+
   describe('minimum column width', () => {
     it('should have a default minimum column width', () => {
       // Clear the minimum column width used in the tests