Grid renders too small and footer appears in random place initially

Description

If a column in a grid contains a vertical layout with a span, and all rows of grid are made visible, the initial height of the grid is too small and footer row can appear in weird place.

Expected outcome

Footer should be where footer should be, right from the start. Not like this:

https://github.com/user-attachments/assets/e7cc3fa0-d7f4-4eb0-90fc-c64bda10d547

Minimal reproducible example

package org.vaadin.example;

import com.vaadin.flow.component.grid.FooterRow;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

import java.util.List;
import java.util.stream.IntStream;

/**
 * A sample Vaadin view class.
 */
@Route
public class MainView extends VerticalLayout {

    public MainView() {

        Grid<String> grid = new Grid<>();
        Grid.Column<String> str = grid.addColumn(s -> s).setHeader("STR");
        grid.addComponentColumn(s -> {
                    VerticalLayout cellLayout = new VerticalLayout();
                    cellLayout.add(new Span("ORG1A"));
                    return cellLayout;
                });

        List<String> list = IntStream.rangeClosed(1, 15).mapToObj(i -> "" + i).toList();
        grid.setItems(list);

        grid.setAllRowsVisible(true);

        FooterRow footerRow = grid.prependFooterRow();
        footerRow.getCell(str).setComponent(new Paragraph("It works!"));

        add(grid);
    }
}

Steps to reproduce

Open the example view and start scrolling easily to see the footer in wrong place.

Environment

Vaadin version(s): 24.5.1 OS: mac, all browsers

Browsers

No response

vaadin / web-components