-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Limit max-height of Note threads and make scrollable #72547
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
|
Size Change: +133 B (+0.01%) Total Size: 2.19 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in ea68b2d. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18738557668
|
|
Oh, I think we overlooked |
|
Clever idea to make the thread area scrollable. I'll give it a try to see how it feels. |
|
@jasmussen - how do you feel about this proposed solution to the overflow issue? |
|
Nice work. There's some potential here. Here's a quick GIF: It's a slightly unusual behavior but it might be good as a bugfix if the code is simple. But there are a couple of pieces to it. This may ultimately need to be a mainly tech-driven solution, as far as finding the beta-phase bugfix that is the simplest and most solid, that we have confidence in. Whether that's this one, or Adam's suggestion of extending the canvas, both seem to directly address the edgecase of long comments. What are your general thoughts on this? Two things though. If we go with this route, we should also apply a min-height, so the resting state looks balanced:
Here, the bottom padding of the input field, and the bottom padding of the note container itself, should ideally be the same all the way around. Another thing, when notes go really long in Google Docs, they get elided after the first several lines of text like so:
We have here a mockup for how that could look for us:
It's unclear if that's possible in the beta period, it can probably wait, but it is an ingredient of the puzzle here. |
Good catch. This fix is in ea68b2d – just needed some I’ve made #72598 for getting the padding appender working in the Site editor, and that would solve one of the problem cases for this approach. Given we could land that for 6.9 and we also do as George suggested #72547 (comment) then this could do, I think. |
I agree, let's disable Notes until the Notes supports the site editor and templates. |
|
This worked well in my testing. Should we use this instead of #72454? |
|
Thanks for your work here @stokesman - we have decided to go with a different solution, see #72811 - appreciate any feedback you have on that ticket. |





What?
An experiment aimed at #72507 and alternative to #72454
Makes Note threads scrollable with their maximum height dynamic according to their vertical position.
Note
This isn’t a complete solution for two known cases where thread’s height may be too short for decent usability:
Why?
Without this, long notes/threads can be cut off if there’s not enough overflow in the canvas to scroll far enough.
Additionally, this offers some improvement to viewing any long threads because without it going to end of a long thread entails scrolling the block (at least partially) out of view. That said, there remains a different concern for very tall blocks, where the thread scrolls out of view when scrolling to the end of the block. We need stickiness I guess.
How?
yposition as a CSS variable so both positioning and max-height CSS values can utilize itoverflowto threadsTesting Instructions
…
Testing Instructions for Keyboard
Screenshots or screencast
Fix demonstrated:
Notes.post.editor.post-only.mp4
Trouble in site editor post-only views
This can also be an issue in the template view if the template has a short footer or lacks one.
Notes.trouble.with.site.editor.post-only.mp4
Side benefit
View whole threads without scrolling block out of view.
Notes.post.editor.side.benefit.mp4