Grid renders too small and footer appears in random place initially

[mstahv]

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:

Screenflick.Movie.94.mp4

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

[jorgheymans]

Our client is also impacted by this , and would appreciate a fix if possible.