Skip to content

Constrain the grid track when line-numbers is absent - #31

Open
bluzername wants to merge 1 commit into
davatron5000:mainfrom
bluzername:fix-overflow-without-line-numbers
Open

Constrain the grid track when line-numbers is absent#31
bluzername wants to merge 1 commit into
davatron5000:mainfrom
bluzername:fix-overflow-without-line-numbers

Conversation

@bluzername

Copy link
Copy Markdown

Fixes #25.

Without line-numbers, :host had no grid-template-columns, so its single implicit column just size itself to the pre content (a plain auto track, not flexible). With line-numbers the second column already use minmax(0, 1fr), a flexible track, which let the pre shrink to fit the available space instead. That is exactly why the reporter see it work with line-numbers but not without.

Fix is one line: give the base :host the same minmax(0, 1fr) track, so both case behave the same.

Added a fixture (test/fixtures/no-line-numbers-width.html, intentionally with no page-level pre overflow rule, same idea as the existing grammar-exhaustive fixture) and a test that check the pre element own box do not spill past its container when there is a long unbroken line and no line-numbers. Confirmed it fail on main and pass with the fix (checked by stashing the src change).

npm test is green (33/33).

Without line-numbers, :host had no grid-template-columns, so its
single implicit column sized itself to the pre content (auto track,
non-flexible), same track behavior a plain block would have. With
line-numbers the second column already use minmax(0, 1fr), a
flexible track, which let the pre shrink to fit. Give the base
:host the same minmax(0, 1fr) so both case behave the same and the
element stay inside its container even with an unbroken long line.

Added a fixture (no page-level pre overflow rule, on purpose) and a
test that check the pre element's own box do not spill past its
container. It fail on main and pass with the fix.

Fixes davatron5000#25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom element wihtout line numbers overflow horizontally

1 participant