Skip to content

Floating notes sometimes cut off at page bottom #72440

@adamsilverstein

Description

@adamsilverstein

Description

Fix an issue where a note can overlap the bottom of the screen, making it cut off and making the form submission or cancel button unreachable.

The floating notes mode arranges the notes to ensure there is no overlap and since #72331 the logic ensures that the focused note is directly beside the active block, pushing other notes up and down to make room.

Step-by-step reproduction instructions

There are two ways I have found to reproduce this issue:

Method 1

The simplest is just to add a really long note thread to a short post -

  1. Create a post with several short blocks
  2. add a very long comment to a post
  3. Try adding long replies

Here is a screencast of this reproduced (note the cutoff at bottom right):

long.note.mp4

Method 2

Adding a long comment to a block near the bottom of the page

  1. create a post with many short blocks
  2. add a note to a block near the bottom
  3. try opening that note and adding a long reply

Here is a screencast of this bug reproduced:

overflow.issue.mp4

Actual Result
The block stays pinned next to the block and text the floating thread is cut off at the bottom as the size grows.

Desired Result
The block bottom stays slightly above the bottom edge and grows on top as the size changes, pushing other blocks up.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Labels

[Feature] NotesPhase 3 of the Gutenberg roadmap around block commenting[Type] BugAn existing feature does not function as intended

Type

Projects

Status

✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions