fix: ReactRouterOutlet interferes with layout

[Artur-]

Fixes #20767

[sonarqubecloud]

Quality Gate passed

Issues
34 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Test Results

1 159 files  ± 0  1 159 suites  ±0   1h 32m 34s ⏱️ -24s
7 579 tests ± 0  7 523 ✅ ± 0  56 💤 ±0  0 ❌ ±0 
7 926 runs   - 26  7 861 ✅  - 26  65 💤 ±0  0 ❌ ±0 

Results for commit 161179c. ± Comparison against base commit f081fc9.

[caalador]

@platosha does the change in #20770 with the new element fix this same issue as the created element sets display to contents?
The react-router-outlet is left without the style though so this might be needed.
I couldn't reproduce the issue with the grid not showing which might be because I don't have hilla 24.7.crudflow-SNAPSHOt available

[Artur-]

The issue can be seen in https://github.com/Artur-/flow-crud-demo/tree/hilla, potentially requires removing some grid data binding not yet in Hilla snapshots. The crudflow snapshot is in the pre-releases repository so that one should work

[platosha]

@platosha does the change in #20770 with the new element fix this same issue as the created element sets display to contents? The react-router-outlet is left without the style though so this might be needed. I couldn't reproduce the issue with the grid not showing which might be because I don't have hilla 24.7.crudflow-SNAPSHOt available

Separate issue. #20770 does not change the style of the ReactRouterOutlet wrapper, so this is still needed.

[mshabarov]

Without display:contents the Grid component is not rendered at all, else rendered fine.

The only thing that I'm not entirely sure about is that VerticalLayout sets width:100% by default and this prevents react-router-outlet to show up always, because the side menu vertical layout takes all the width on the page. However, if I set it's width to auto, it shows up nicely.

That's probably fine as the example project uses divs and vertical layouts instead of AppLayout that has other width default apparently.

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.7.0.alpha3 and is also targeting the upcoming stable 24.7.0 version.