table view: fix sorting button position#1561
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes the positioning of sorting buttons in the table view header. The change moves the sort button from a flex item to an absolutely positioned element, allowing it to stay at a fixed position on the right side of the header cell.
Changes:
- Removed commented-out CSS code for alternating row colors
- Changed button positioning from flex layout to absolute positioning
- Added background colors for light and dark color schemes to prevent text bleed-through
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .sortable-header__text { | ||
| flex: 1; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } |
There was a problem hiding this comment.
The sortable-header__text element needs padding-right to prevent text from extending underneath the absolutely positioned button. When the button appears (on hover or when the column is active), it will overlap with the text. Consider adding padding-right equal to the button width plus desired spacing (e.g., 28px for 24px button + 4px gap).
| } | ||
|
|
||
| @media (prefers-color-scheme: light) { | ||
| .sortable-header__button { | ||
| background: rgba(255, 255, 255, 1); | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| .sortable-header__button { | ||
| background: rgba(32, 32, 32, 1); | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
The hardcoded background colors (white and dark gray) may not match the actual table header background, especially if custom Material theming is applied. Consider using CSS custom properties or ensuring these values align with the Material theme's surface colors. The background color is needed to prevent text from showing through the absolutely positioned button, but it should match the header cell background exactly.
| } | |
| @media (prefers-color-scheme: light) { | |
| .sortable-header__button { | |
| background: rgba(255, 255, 255, 1); | |
| } | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .sortable-header__button { | |
| background: rgba(32, 32, 32, 1); | |
| } | |
| } | |
| background-color: var(--db-table-header-background, inherit); | |
| } |
1 participant
No description provided.