livewire / flux

The official Livewire UI component library
420 stars 37 forks source link

Sort button cut off on first column in table #296

Open benjibee opened 1 week ago

benjibee commented 1 week ago

In the following snippet of a table if I add sortable to the first column the button that is shown is cut off on the left side.

<flux:table>
    <flux:columns>
        <flux:column sortable>Customer</flux:column>
        <flux:column>Date</flux:column>
        <flux:column>Status</flux:column>
        <flux:column>Amount</flux:column>
    </flux:columns>

    <flux:rows>
        <flux:row>
            <flux:cell>Lindsey Aminoff</flux:cell>
            <flux:cell>Jul 29, 10:45 AM</flux:cell>
            <flux:cell>
                <flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge>
            </flux:cell>
            <flux:cell variant="strong">$49.00</flux:cell>
        </flux:row>
    </flux:rows>
</flux:table>

Image

Possible Fix

Only applying the padding resets if the column isn't sortable fixes it, though it may not match with other overall design ideas you're going for.

// stubs/resources/views/flux/column.blade.php:9

$classes = Flux::classes()
    ->add('py-3 px-3')
    ->add($sortable ? '' : 'first:pl-0 last:pr-0')
    ->add('text-left text-sm font-medium text-zinc-800 dark:text-white')
    ->add($align === 'right' ? 'group/right-align' : '')
    ;

Image

joshhanley commented 3 days ago

@benjibee thanks for reporting! I have submitted a PR to fix this.