Spreadsheet panes overlap with sheet when using it in combination with Lit Template/Tabsheet

[astarno-dev]

Description

Hi,

When adding a spreadsheet to a tab of a tabsheet that is not the default tab, the side panes seem to overlap with the sheet/cells. This causes cells to be hidden behind these panes. This only seems to happen when using Lit Template.

Expected outcome

Non overlapping side panels.

Minimal reproducible example

In LitElement (TS):

import {css, html, LitElement} from 'lit-element';
import {customElement, property} from 'lit/decorators.js';

@customElement('example')
export class RequirementRulesView extends LitElement {

  static get styles() {
    return [];
  }

  render() {
    return html`
        <vaadin-tabsheet>
          <vaadin-tabs slot="tabs">
            <vaadin-tab id="some-tab">Some tab</vaadin-tab>
            <vaadin-tab id="spreadsheet-tab">Spreadsheet tab</vaadin-tab>
          </vaadin-tabs>
        
          <div tab="some-tab">This is some placeholder tab</div>
          <div tab="spreadsheet-tab">
           <div id="spreadsheet-container"></id>
          </div>
        </vaadin-tabsheet>

    `;
  }
}

In linked Java class:

@Id("spreadsheet-container")
private Div spreadsheetContainer;

Spreadsheet spreadsheet = new Spreadsheet();
spreadsheetContainer.add(spreadsheet);

Steps to reproduce

When running the minimal example above in a working Vaadin Project, the issue should appear.

Environment

Vaadin version(s): 24.5.8
Java: 21
Spring boot: 3.3.2
OS: Windows

Browsers

No response

[DiegoCardoso]

I verified the issue and was able to reproduce it by attaching a Spreadsheet instance to a container that is styled initially with a display: none value and then changing it to display: block:

Div container = new Div();
container.getStyle().setDisplay(Display.NONE);
container.setSizeFull();
Spreadsheet spreadsheet = new Spreadsheet();
container.add(spreadsheet);
add(new Button("show", e -> {
    container.getStyle().setDisplay(Display.BLOCK);
}), container);

The panels offset calculations are done on attach and the element is initially hidden, which causes the panels to be rendered on the top-left corner of the component.