Table Header Misalignment with orderable: true

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

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.