Skip to content

Fix sortable column hover area#2379

Open
ganyicz wants to merge 1 commit intomainfrom
filip/fix-sortable-column-hover
Open

Fix sortable column hover area#2379
ganyicz wants to merge 1 commit intomainfrom
filip/fix-sortable-column-hover

Conversation

@ganyicz
Copy link
Collaborator

@ganyicz ganyicz commented Feb 6, 2026

The scenario

Hovering over sortable column only affects the nested button, not the full header cell.

But clicking works on the entire cell.

Screen.Recording.2026-02-06.at.20.48.11.mov

The problem

The wire:click is added to the th, but the hover group is on the <button>:

<th {{ $attributes->class($classes) }}> {{-- wire:click --}}
    <button class="group/sortable ..."> {{-- hover area --}}
        <div class="group-hover/sortable:opacity-100"> ... </div>
    </button>
</th>

The solution

Move group/sortable from the <button> to the <th>.

<th class="... group/sortable">
    <button class="flex items-center ...">
</th>
Screen.Recording.2026-02-06.at.20.53.09.mov

Fixes #2362

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Table header sortable column: clickable area larger than visual hover indicator

1 participant