Navigation under the Comment Block is not cleared after floating

[alberto-marin]

Describe the bug When breaking the comments into pages, the comment navigation is missing CSS styles to clear those elements after float.

To Reproduce Steps to reproduce the behavior:

1. Create a post and make a few comments, let's say 13 (why not?)
2. Activate Break comments into pages under Settings -> Discussion. Set to an amount that will ensure the comment navigation to show.
3. Visualise the post with the comments
4. See CSS problem

Expected behavior Elements before and after the wp comment block containing the navigation should be cleared and avoid overlapping.

Screenshots

Current problem:

Expectation:

Device inphone:

• Device: macbook pro M1
• OS: macOS Big Sur
• Browser: Chrome
• Version: 96.0.4664.110 (Official Build) (arm64)

Proposed solution

.wp-block-post-comments .navigation {
    margin-bottom: 1.4em;
}
.wp-block-post-comments .navigation:before, 
.wp-block-post-comments .navigation:after {
    content: '';
    display: table;
    clear: both;
}

[kjellr]

Thanks for flagging — I think this probably needs an issue in Gutenberg akin to the one created in response to https://github.com/WordPress/twentytwentytwo/issues/44: https://github.com/WordPress/gutenberg/pull/35958

[kjellr]

This has been reported upstream here: https://github.com/WordPress/gutenberg/issues/38188

Thanks again!