fix: avoid doubled footer border when all rows visible #10475
Conversation
vursen
changed the title
| [part~='first-footer-row']::before { | ||
| position: absolute; | ||
| inset-inline: 0; | ||
| [part~='row'] { |
There was a problem hiding this comment.
It's a but hard to figure out what change is the actual fix here due to CSS nesting usage.
Are all of these changes necessary in this PR? If not, maybe we could extract it to separate PR.
There was a problem hiding this comment.
All changes are actually necessary. :)
The previous implementation was very hard to manage because it mixed multiple cases in the same selectors. It also kept the "focus outline" rules very far from the "borders" rules which were actually related to each other. In the new version, I'm taking a different approach:
- I keep cases separate for better clarity
- I keep the "focus outline" rules near the related "borders" rules
- I apply a top border by default and disable it where needed
- I apply bottom borders only in specific cases
This allowed the doubled footer border issue to be naturally solved by these changes.
There was a problem hiding this comment.
I can actually rename it to a "refactor" if you like
There was a problem hiding this comment.
@web-padawan, it might help the review if you keep in mind that the ::after pseudo element on each row & cell is for their focus outline, and the ::before pseudo on the last header row and first footer row is for the row border.
There was a problem hiding this comment.
Thanks, it makes more sense this way 👍
| &::after { | ||
| bottom: 0; | ||
| } | ||
| [part~='cell']::after { | ||
| bottom: 0; | ||
| } |
|
web-padawan
deleted the
remove-double-footer-border-when-all-rows-visible
branch
Description
The previous implementation was very hard to manage because it mixed multiple cases in the same selectors. It also kept the "focus outline" rules very far from the "borders" rules while they were actually related to each other. This created a breeding ground for issues like doubled footer border, in particular.
In this PR, I'm refactoring the implementation to:
These changes make the doubled footer border issue go away naturally.
Follow-up to #10331
Type of change