-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Avoid notes cut off by overflowing bottom border #72454
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +44 B (0%) Total Size: 2.2 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in c73f774. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18602854315
|
|
Thanks for the video. I wouldn't extend the canvas to fit the comments if we can find an alternative. I don't think we character limit notes, so inevitably they can become very long, and I believe how we elide and collapse is going to be something we evolve over time, such as always collapsing comments with a "read more" when they are longer than n characters, and even collapsing threads when there are more than n comments. I have a feeling @jarekmorawski may hae instincts around this. But for the immediate future, I wonder if we can apply a max-height to comments, and then allow them to scroll. We might need canvas extension for extreme cases, after all, but we probably still need to pair that with scrolling. What do you think? |
| // otherwise the user may not be able to add a reply. | ||
| let threadBottom = selectedThreadTop + selectedThreadHeight; | ||
| const sidebarHeight = | ||
| commentSidebarRef.current?.getBoundingClientRect().height || 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's declare commentSidebarRef as a dependency to fix the ESLint warning.
|
I can confirm that this fixes the mentioned issue. But I agree that there's room for improvement. Currently, if you have notes with a large body of text, some notes for remaining blocks might not be visible. Also, when replying to a large note, there is no way to scroll up to the previous comment, which will make actual replies harder. ScreencastCleanShot.2025-10-20.at.15.02.03.mp4 |
Yeah, I just tested the PR and you cannot read the top of the comments, so I'm not sure how usable it's going to be this way either. I haven't checked this feature much and possible technical restrictions, but I'd expect some kind of overflow/scrollbars to be the proper fix.. |
True. Still, the most important part is being able to add a new comment, which this PR addresses. One way to fix the top cutoff would be if the user scrolled to the top, push the notes down from the top. Another idea is making the notes themselves scrollable. |
I'm more in favor of the former and not the later, meaning I'd prefer to avoid another scrollbar/scrolling experience specific for notes. In testing in Google Docs, seems as though they treat comments there as within the doc canvas itself where the doc can scroll out of view if comments are lengthy enough. That handling won't work (or at least feels suboptimal) within Gutenberg, so aiming for the "if the user scrolled to the top, push the notes down from the top" would be my preference. |
I'm going to work on this idea - if the user scrolls to the top of the editor while commenting on a thread, we can push down the thread so it doesn't overlap there as well. We will still have an edge case where you create a very short post with no scrolling, then add a very long comment thread. Perhaps the best solution would be to detect this scenario and use an alternate solution in that instance such as making the thread itself be scrollable. |
|
@jeffpaul I gave #72547 a test and was surprised how well it works, can you give it a try? You can test in in Playground. It does add scrolling, but its a fairly intuitive and browser native approach. |
|
@adamsilverstein I concur, testing that Playground link for 72547 is a definite improvement. Any immediate concerns you have with moving towards merging that in place of this PR (asked differently, anything from this PR that you feel pairs well with the work in 72547)? |
No, but for completeness sake, I also created a PR to test out the idea of resizing the editor iframe (body) to set its min-height to match the notes required space. Has some rough edges, but gets the idea across: #72811 |
|
Closing in favor of #72811 |
What?
Fix a bug where under certain conditions the comment reply form became inaccessible/cur off at the bottom of the screen
Closes #72440
Why?
With very long comments that do not fit in the viewport, users should still be able to enter a new reply.
Considerations:
How?
The current PR
Testing Instructions
See issue
Testing Instructions for Keyboard
Screenshots or screencast
Adjusting while typing
make.room.at.the.bottom.mp4