refactor: re-implement grid base styles to use CSS borders #10331
Conversation
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
vursen
force-pushed
the
rework-grid-border-implementation
branch
2 times, most recently
from
54794be to
e5f006e
Compare
vursen
changed the base branch from
main
to
increase-min-height-for-grid-rows
vursen
force-pushed
the
rework-grid-border-implementation
branch
6 times, most recently
from
5bf8c3e to
9d478a4
Compare
vursen
force-pushed
the
increase-min-height-for-grid-rows
branch
from
ec62dfb to
05c15b8
Compare
vursen
force-pushed
the
rework-grid-border-implementation
branch
from
9d478a4 to
cfd776d
Compare
vursen
changed the base branch from
increase-min-height-for-grid-rows
to
main
vursen
force-pushed
the
rework-grid-border-implementation
branch
5 times, most recently
from
bf9d04a to
04ae7af
Compare
vursen
force-pushed
the
rework-grid-border-implementation
branch
from
5f85ee2 to
f6d6e1f
Compare
34 tasks
vursen
force-pushed
the
rework-grid-border-implementation
branch
from
f6d6e1f to
ca81b3e
Compare
vursen
changed the title
vursen
changed the title
1 task
vursen
force-pushed
the
rework-grid-border-implementation
branch
from
e4c0b51 to
6c196e2
Compare
1 task
vursen
force-pushed
the
rework-grid-border-implementation
branch
2 times, most recently
from
852c05f to
1df6c59
Compare
vursen
changed the title
vursen
force-pushed
the
rework-grid-border-implementation
branch
2 times, most recently
from
4a21007 to
1ba6f9b
Compare
jouni
reviewed
Nov 10, 2025
| :host([navigating]) #header:has(tr:last-child:focus-within), | ||
| :host([navigating]) #footer:has(tr:first-child:focus-within), | ||
| [empty-state] #header { | ||
| z-index: 2; |
Member
There was a problem hiding this comment.
Can we make the z-index conditional for the footer? Meaning:
:host([overflow~='bottom']) #footer {
z-index: 2;
}That would avoid the extra strong footer with "auto height" (all-rows-visible):
Or perhaps some selector needs fixing, that the pseudo element on the first footer row is visible in that state (:host(:not([overflow~='top'])) #scroller:not([empty-state]) [part~='first-footer-row']::before).
Contributor
Author
There was a problem hiding this comment.
Thanks, I'll fix it in a follow-up PR.
1 task
vursen
force-pushed
the
rework-grid-border-implementation
branch
from
9f37df3 to
3147d12
Compare
vursen
force-pushed
the
rework-grid-border-implementation
branch
from
05f98c5 to
a40a22a
Compare
|
web-padawan
approved these changes
Nov 11, 2025
jouni
approved these changes
Nov 11, 2025
This was referenced Nov 11, 2025
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.
Description
The PR refactors the grid base styles to use CSS borders instead of box shadows for rendering row and column borders. This improves grid's rendering performance with the base styles by about 40%, bringing it closer to Lumo:
(measured on a page with a heavy 60-column grid)
Depends on
Type of change