fix: prevent scroller content overflow when it has 100% height (#10622) (#10630)

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

Author: 3 people

packages/scroller/src/styles/vaadin-scroller-base-styles.js

@@ -19,7 +19,7 @@ export const scrollerStyles = css`
     outline: none;
     flex: 1;
     box-sizing: border-box;
-    padding: 0 var(--vaadin-scroller-padding-inline);
+    padding: var(--vaadin-scroller-padding-block) var(--vaadin-scroller-padding-inline);
   }
 
   :host([focus-ring]) {
@@ -58,11 +58,15 @@ export const scrollerStyles = css`
   }
 
   :host::before {
-    margin-bottom: calc(var(--vaadin-scroller-padding-block) - var(--_indicator-height));
+    top: 0;
+    margin-bottom: calc(var(--_indicator-height) * -1);
+    translate: 0 calc(var(--vaadin-scroller-padding-block) * -1);
   }
 
   :host::after {
-    margin-top: calc(var(--vaadin-scroller-padding-block) - var(--_indicator-height));
+    bottom: 0;
+    margin-top: calc(var(--_indicator-height) * -1);
+    translate: 0 calc(var(--vaadin-scroller-padding-block) * 1);
   }
 
   :host([overflow~='top'])::before {

packages/scroller/test/scroller.test.js

@@ -147,4 +147,34 @@ describe('vaadin-scroller', () => {
       expect(scroller.getAttribute('overflow')).to.equal('top');
     });
   });
+
+  describe('full height content', () => {
+    let container;
+
+    beforeEach(async () => {
+      container = fixtureSync(`
+        <div style="display: flex; flex-direction: column; height: 300px;">
+          <vaadin-scroller style="--vaadin-scroller-padding-block: 16px; --vaadin-scroller-padding-inline: 16px;">
+            <div style="height: 100%;">Content</div>
+          </vaadin-scroller>
+        </div>
+      `);
+      scroller = container.querySelector('vaadin-scroller');
+      await nextRender();
+    });
+
+    it('should not overflow when content has height 100%', () => {
+      const content = scroller.querySelector('div');
+      const scrollerRect = scroller.getBoundingClientRect();
+      const contentRect = content.getBoundingClientRect();
+
+      // Content bottom should not exceed scroller bottom
+      expect(contentRect.bottom).to.be.at.most(scrollerRect.bottom);
+    });
+
+    it('should not create scrollable area when content has height 100%', () => {
+      // If pseudo-elements don't affect layout, scrollHeight should equal clientHeight
+      expect(scroller.scrollHeight).to.equal(scroller.clientHeight);
+    });
+  });
 });

packages/tabsheet/test/tabsheet.test.js

@@ -401,6 +401,33 @@ describe('tabsheet - lazy tabs', () => {
   });
 });
 
+describe('tabsheet - full height content', () => {
+  let tabsheet;
+
+  beforeEach(async () => {
+    tabsheet = fixtureSync(`
+      <vaadin-tabsheet style="height: 300px;">
+        <vaadin-tabs slot="tabs">
+          <vaadin-tab id="tab-1">Tab 1</vaadin-tab>
+        </vaadin-tabs>
+
+        <div tab="tab-1" style="height: 100%;">Panel 1</div>
+      </vaadin-tabsheet>
+    `);
+
+    await nextFrame();
+  });
+
+  it('should not overflow when panel has height 100%', () => {
+    const panel = tabsheet.querySelector('[tab="tab-1"]');
+    const tabsheetRect = tabsheet.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+
+    // Panel bottom should not exceed tabsheet bottom
+    expect(panelRect.bottom).to.be.at.most(tabsheetRect.bottom);
+  });
+});
+
 describe('tabsheet - tabs without ID', () => {
   let tabsheet, tabs;