chore: Move side menu height setting to FloatingUI

[matthewlipski]

Summary

This PR makes it so that the height of the side menu is now set in FloatingUI middleware on SideMenuController. This is a change from the old method, which uses a more convoluted useEffect hook + CSS.

Additionally, it's been changed so that the height is no longer hardcoded, but instead the block content element's height is used. In some cases, the side menu is instead aligned to an element nested deeper inside, like for table blocks.

To streamline everything and make it more consistent, the side menu is now always centred vertically. Before, it would change depending on the block. E.g. it would be centred to the first line of paragraph and heading blocks, but aligned to the top of most file blocks, though not the audio block. This was done to make it more similar to Notion, but this resulted in a bunch of arbitrary exceptions having to be made.

Additionally, two bugs with the file panel and side menu have been fixed. The file panel would show up below any nested blocks, while the side menu was horizontally indented with nested blocks. These were fixed by adding more options to the BlockPopover component, detailed in the changes list below.

Rationale

This continues with the theme of moving responsibilities to FloatingUI where possible, which we started doing as part of the major refactor in #2143. The bugs are also regressions that should be fixed.

Changes

• Removed useEffect hook from SideMenu component.
• Removed setting side menu height in CSS.
• Added size middleware to SideMenuController to set the side menu height.
• Added includeNestedBlocks option to BlockPopover. When true, this works the same as before, using the entire block as the reference element. When false, it uses the block's content as the reference element. Defaults to true.
• Added spanEditorWidth option to BlockPopover. When false, this works the same as before, where the boundingClientRect is the same size & position as the reference element. When true, the x position and width are used for the boundingClientRect, and only the reference element y position and height are used.

Impact

This actually also fixes a previously unknown bug with the file panel thanks to that addition of includeNestedBlocks. Because it used the whole block as the reference element, it would show beneath all child blocks.

Testing

Went through the Notion UI testing doc to ensure no regressions for UI elements using the BlockPopover (file panel, side menu & AI menu). Added test cases to all UI elements for nested blocks.

Screenshots/Video

N/A

Checklist

• [X] Code follows the project's coding standards.
• [X] Unit tests covering the new feature have been added.
• [X] All existing tests pass.
• [X] The documentation has been updated to reflect the new feature

Additional Notes