Table Header Misalignment with orderable: true
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 64/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- css, typescript
- Domain
- frontend
Research direction
Start by tracing the .sort-row__icon rule in the payload-default styles and the custom stylesheet import in layout.tsx. Reproduce a collection with orderable: true, compare the drag-handle header and body columns after a full refresh, and confirm they remain aligned without relying on HMR.
Written by the indexing model from the issue text.
Description
Describe the Bug.
Description: When orderable: true is enabled, the collection table headers misalign with the body columns. This occurs because the drag-handle column in the thead does not match the width of the corresponding td in the tbody.
Root Cause: The class .sort-row__icon (the SVG drag handle) has width: min-content in the default @layer payload-default styles. This prevents the browser from correctly calculating a consistent column width before the SVG is fully rendered, leading to a layout shift in the table grid.
For fix:
.sort-row__icon {
width: auto !important;
}
Custom styles imported via layout.tsx (e.g., import './custom.scss') only apply correctly during Hot Module Replacement (HMR). Upon a full page refresh (F5), the styles are either not loaded or are overridden by Payload's internal CSS.
Reproduction Steps
orderable: true
Environment Info
Payload: 3.82.1
- Dominant language
- TypeScript
- Stars
- 44.8k
- Forks
- 4.2k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 53
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from payloadcms/payload
-
Bug plugin: cloud-storage plugin: storage-s3
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
payloadcms/payload#18221 ·
-
area: ui Bug status: needs-triage v3
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
payloadcms/payload#18215 · 1 comment ·
-
Bug
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
payloadcms/payload#18163 ·
-
Bug
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
payloadcms/payload#18161 ·
-
area: core Bug
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
payloadcms/payload#18072 ·
All issues in payloadcms/payload
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100