Grid horizontal scrolling not working as expected with frozen column and joined footer

[javier-godoy]

Description

I have a grid with 7 columns. The last column is frozen, and the left-most six columns (not frozen) have a joined footer. When the grid is horizontally scrolled, the last column kind of separate from the rest of the grid (notice how the row borders are broken before that column)

Expected outcome

I would expect that Grid scrolls nicely, because frozen columns are excluded from the the joined group.

Minimal reproducible example

Example:

public class HelloWorldView extends Div {

  public HelloWorldView() {

    setSizeFull();

    Grid<Object> grid = new Grid<>();
    grid.addColumn(x -> 1).setHeader("1").setAutoWidth(true);
    grid.addColumn(x -> 2).setHeader("2").setAutoWidth(true);
    grid.addColumn(x -> 3).setHeader("3").setWidth("400px");
    grid.addColumn(x -> 4).setHeader("4").setWidth("300px");
    grid.addColumn(x -> 5).setHeader("5").setAutoWidth(true);
    grid.addColumn(x -> 6).setHeader("6").setWidth("500px");
    grid.addColumn(x -> 7).setHeader("7").setWidth("400px").setFrozen(true);

    Component toolBar = new Div(new Text("HELLO"));
    toolBar.getStyle().set("background", "red");
    grid.appendFooterRow();
    grid.setItems(1, 2, 3);

    FooterRow fr = grid.appendFooterRow();
    FooterCell footerCell =
        fr.join(grid.getColumns().stream().limit(6).toArray(Grid.Column[]::new));
    footerCell.setComponent(toolBar);

    add(grid);
  }
}

Steps to reproduce

Example:

1. Add the snippet above to a view.
2. Notice how the last column separates from the grid, when grid is horizontally scrolled.

Environment

Vaadin version(s): 24.0.5

Browsers

No response

[web-padawan]

This is essentially a duplicate of #1064 and #3363 - as mentioned in https://github.com/vaadin/flow-components/issues/3363#issuecomment-1161854777, in fact this is a design limitation.

[web-padawan]

Possible workaround by @tomivirkki from the discussion in https://github.com/vaadin/flow-components/issues/3363#issuecomment-1266885463 (see the whole discussion for more details).

[javier-godoy]

@web-padawan This is actually a bug report complaining that https://github.com/vaadin/flow-components/issues/3363#issuecomment-1266885463 by @tomivirkki does not work as expected.

You can fix the issue in your app by excluding the last column (the frozen one), from the list of columns to join instead of joining every column ... only join the columns before the frozen one

In the reproducible example I excluded the frozen columns from the joined group. The rightmost (7th) column is frozen, but it is not part of the joined group, which only takes the first 6 unfrozen columns:

footerCell = fr.join(grid.getColumns().stream().limit(6).toArray(Grid.Column[]::new))
                                                ^^^^^^^^

This is also not a duplicate of #1064 (joining cells from frozen and unfrozen columns results in weird horizontal scrolling) because I'm not joining cells from both "frozen and unfrozen columns", however the horizontal scrolling is weird.