feat: update grid min-height calculation to include header/footer slots

The min-height calculation now accounts for header and footer slot content
in addition to the existing table headers/footers and default row height.
This ensures the grid maintains proper sizing when using the new header
and footer slot functionality.

- Observe header and footer slot containers with ResizeObserver
- Include slot container heights in min-height calculation
- Add comprehensive tests for slot-based min-height scenarios

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: Artur-

packages/grid/src/vaadin-grid-mixin.js

@@ -281,6 +281,9 @@ export const GridMixin = (superClass) =>
       minHeightObserver.observe(this.$.header);
       minHeightObserver.observe(this.$.items);
       minHeightObserver.observe(this.$.footer);
+      // Also observe the header and footer slot containers
+      minHeightObserver.observe(this.$.gridHeader);
+      minHeightObserver.observe(this.$.gridFooter);
 
       this._tooltipController = new TooltipController(this);
       this.addController(this._tooltipController);
@@ -961,7 +964,12 @@ export const GridMixin = (superClass) =>
       const headerHeight = this.$.header.clientHeight;
       const footerHeight = this.$.footer.clientHeight;
       const scrollbarHeight = this.$.table.offsetHeight - this.$.table.clientHeight;
-      const minHeight = headerHeight + rowHeight + footerHeight + scrollbarHeight;
+
+      // Include header and footer slot container heights
+      const headerSlotHeight = this.$.gridHeader.clientHeight;
+      const footerSlotHeight = this.$.gridFooter.clientHeight;
+
+      const minHeight = headerHeight + rowHeight + footerHeight + scrollbarHeight + headerSlotHeight + footerSlotHeight;
 
       // The style is set to host instead of the scroller so that the value can be overridden by the user with "grid { min-height: 0 }"
       // Prefer setting style in adopted style sheet to avoid the need to add a confusing inline style on the host element

packages/grid/test/min-height.test.js

@@ -101,6 +101,72 @@ describe('min-height', () => {
     });
   });
 
+  describe('with header slot', () => {
+    beforeEach(async () => {
+      const headerDiv = document.createElement('div');
+      headerDiv.setAttribute('slot', 'header');
+      headerDiv.style.height = '50px';
+      headerDiv.textContent = 'Header Slot Content';
+      grid.appendChild(headerDiv);
+      flushGrid(grid);
+      await nextResize(grid);
+    });
+
+    it('should include header slot height in min-height', () => {
+      const height = grid.getBoundingClientRect().height;
+      const headerSlotHeight = grid.shadowRoot.querySelector('#gridHeader').getBoundingClientRect().height;
+      expect(headerSlotHeight).to.be.above(0);
+      expect(height).to.be.at.least(rowHeight + headerSlotHeight);
+    });
+  });
+
+  describe('with footer slot', () => {
+    beforeEach(async () => {
+      const footerDiv = document.createElement('div');
+      footerDiv.setAttribute('slot', 'footer');
+      footerDiv.style.height = '40px';
+      footerDiv.textContent = 'Footer Slot Content';
+      grid.appendChild(footerDiv);
+      flushGrid(grid);
+      await nextResize(grid);
+    });
+
+    it('should include footer slot height in min-height', () => {
+      const height = grid.getBoundingClientRect().height;
+      const footerSlotHeight = grid.shadowRoot.querySelector('#gridFooter').getBoundingClientRect().height;
+      expect(footerSlotHeight).to.be.above(0);
+      expect(height).to.be.at.least(rowHeight + footerSlotHeight);
+    });
+  });
+
+  describe('with header and footer slots', () => {
+    beforeEach(async () => {
+      const headerDiv = document.createElement('div');
+      headerDiv.setAttribute('slot', 'header');
+      headerDiv.style.height = '50px';
+      headerDiv.textContent = 'Header Slot Content';
+      grid.appendChild(headerDiv);
+
+      const footerDiv = document.createElement('div');
+      footerDiv.setAttribute('slot', 'footer');
+      footerDiv.style.height = '40px';
+      footerDiv.textContent = 'Footer Slot Content';
+      grid.appendChild(footerDiv);
+
+      flushGrid(grid);
+      await nextResize(grid);
+    });
+
+    it('should include both header and footer slot heights in min-height', () => {
+      const height = grid.getBoundingClientRect().height;
+      const headerSlotHeight = grid.shadowRoot.querySelector('#gridHeader').getBoundingClientRect().height;
+      const footerSlotHeight = grid.shadowRoot.querySelector('#gridFooter').getBoundingClientRect().height;
+      expect(headerSlotHeight).to.be.above(0);
+      expect(footerSlotHeight).to.be.above(0);
+      expect(height).to.be.at.least(rowHeight + headerSlotHeight + footerSlotHeight);
+    });
+  });
+
   describe('override', () => {
     beforeEach(() => {
       fixtureSync(`