Calculate for prevent-overflow items correctly in toolbar#1058
Open
zoltanhosszu wants to merge 3 commits into
Open
Calculate for prevent-overflow items correctly in toolbar#1058zoltanhosszu wants to merge 3 commits into
prevent-overflow items correctly in toolbar#1058zoltanhosszu wants to merge 3 commits into
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes toolbar overflow compaction so that items marked with data-prevent-overflow (including extension-injected buttons) are properly accounted for during overflow measurement, preventing them from visually breaking outside the toolbar’s padded bounds.
Changes:
- Reworks the toolbar overflow compaction logic to measure actual overflow against the toolbar’s content bounds and compact accordingly.
- Treats
data-prevent-overflowas a presence-based flag (any value) when determining which buttons are eligible to move into the overflow menu. - Adds a browser test to ensure injected non-overflowable buttons remain in the toolbar and that visible toolbar items stay within bounds.
Tip
If you aren't ready for review, convert to a draft PR.
Click "Convert to draft" or run gh pr ready --undo.
Click "Ready for review" or run gh pr ready to reengage.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| test/browser/tests/formatting/toolbar.test.js | Adds coverage ensuring injected data-prevent-overflow buttons don’t end up in the overflow menu and don’t cause layout spillover. |
| src/elements/toolbar.js | Updates overflow detection/compaction to measure real overflow and respect non-overflowable injected items. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
zoltanhosszu
changed the title
prevent-overflow items correctly in toolbar
Collaborator
|
Implemented my review thoughts in #1062 |
Comment on lines
+291
to
+295
| this.#showOverflowMenu() | ||
| const overflowWidth = this.#getOverflowWidth() | ||
|
|
||
| const availableWidth = this.clientWidth | ||
| const buttonRightEdges = buttons.map(button => { | ||
| const style = window.getComputedStyle(button) | ||
| return button.offsetLeft + button.offsetWidth + parseFloat(style.marginRight) | ||
| }) | ||
|
|
||
| let firstOverflowing = -1 | ||
| for (let i = 0; i < buttons.length; i++) { | ||
| if (buttonRightEdges[i] > availableWidth) { | ||
| firstOverflowing = i | ||
| break | ||
| } | ||
| if (overflowWidth > 0) { | ||
| this.#reclaimWidth(overflowWidth) |
Collaborator
There was a problem hiding this comment.
Fixed; it wasn't changing anything in practice.
Use clientWidth vs scrollWidth to determine whether the toolbar is overflowing and offsetWidth to directly get the button widths. The single-pass design is kept to prevent forced layouts by recalculating the widths on every button move.
samuelpecher
force-pushed
the
toolbar-respect-preventoverflow
branch
from
3c1c613 to
bbe6dc2
Compare
| recoveredWidth += button.offsetWidth + gap | ||
| } | ||
|
|
||
| this.#overflowMenuDropdown.prepend(...overflowButtons) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The calculation of toolbar overflow didn't account for elements with
data-prevent-overflowattribute, so inserting those items via an extension still broke out of the toolbar's container width.This PR updates that calculation logic.