fix: Placeholder overflow issues
Summary
This PR fixes some issues with overflowing placeholders when there is not enough space to display them on one line.
Rationale
This was causing issues on mobile especially, since viewports can get pretty small.
Changes
- Moved placeholders to
.bn-block-content:afterelements instead of.bn-inline-content:before. - Removed
position: absoluteand other styles from placeholders. - Made
.bn-inline-contentelements no longer span container width. - Adjusted placeholder styles.
Impact
I was wary of making .bn-inline-content elements no longer span container width due to #1523 and #1553, as we've had some cursor selection issues related to that before. However, I've done some fairly extensive manual testing across browsers against the preview from #731 (PR that broke the selection referenced in #1553), and everything looks good.
Testing
N/A
Screenshots/Video
Before:
https://github.com/user-attachments/assets/821cd351-5150-4333-bb03-20614e22f90c
After:
https://github.com/user-attachments/assets/7fc49f00-ebe0-4a55-95c8-8277617e343e
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