search

filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
17.65k stars 2.76k forks source link

Overflow issue with tables on mobile #1097

Closed coleshirley closed 2 years ago

coleshirley commented 2 years ago

Package

filament/tables

Package Version

2.7.9

Laravel Version

8.77.1

Livewire Version

No response

PHP Version

8.0.13

Bug description

On mobile browsers with small screens the tables do not horizontally overflow properly. Below is an image of a filament table on a small screen using chrome's developer console. Once you hit a small enough viewport size the site starts shrinking instead of just overflowing properly.

image

This is a simple fix following the "Note:" part of this stack overflow answer:

https://stackoverflow.com/a/14271049

This fix can be applied in /filament/tables/resources/views/index.blade.php lines 96-100

current:

<div @class([
            'overflow-y-auto',
            'rounded-t-xl' => ! $hasTableHeader,
            'border-t' => $hasTableHeader,
        ])>

after fix

<div @class([
            'overflow-y-auto relative',   // add relative here
            'rounded-t-xl' => ! $hasTableHeader,
            'border-t' => $hasTableHeader,
        ])>

After the fix the horizontal scrolling overflow works properly:

image

Steps to reproduce

No response

Relevant log output

No response

danharrin commented 2 years ago

Thanks, this change will be in the next release :)