Filament•2mo ago

Too much space between Widgets and Content when having Clusters (submenu)

When i have a large amount of menuitems in my cluster i notice there is space between a page his Header Widgets and its content. I checked vendor/filament/filament/resources/views/components/page/index.blade.php and starting on line 57:

@class([
                'flex flex-col gap-8' => $subNavigation,
                match ($subNavigationPosition) {
                    SubNavigationPosition::Start, 
                    SubNavigationPosition::End => 'md:flex-row',
                    default => null,
                } => $subNavigation,
                'h-full' => $fullHeight,
            ])
        >

@class([
                'flex flex-col gap-8' => $subNavigation,
                match ($subNavigationPosition) {
                    SubNavigationPosition::Start, 
                    SubNavigationPosition::End => 'md:flex-row',
                    default => null,
                } => $subNavigation,
                'h-full' => $fullHeight,
            ])
        >

When i add md:items-start behind the md:flex-row like so:

@class([
                'flex flex-col gap-8' => $subNavigation,
                match ($subNavigationPosition) {
                    SubNavigationPosition::Start, 
                    SubNavigationPosition::End => 'md:flex-row md:items-start',
                    default => null,
                } => $subNavigation,
                'h-full' => $fullHeight,
            ])
        >

@class([
                'flex flex-col gap-8' => $subNavigation,
                match ($subNavigationPosition) {
                    SubNavigationPosition::Start, 
                    SubNavigationPosition::End => 'md:flex-row md:items-start',
                    default => null,
                } => $subNavigation,
                'h-full' => $fullHeight,
            ])
        >

the space between the widgets disappear. also when i had more than 2 widgets and the flex-columns were 2 so the third and forth etc. had to much space between them. with the md:items-start this is fixed.
Can anybody confirm they have the same problem with the Custers and long cluster menu's --> and spaces between widgets and content?

6 Replies

toeknee•2mo ago

Some pictures would be helpful.

shenntek•2mo ago

see https://github.com/filamentphp/filament/issues/13037

GitHub

grid layout in Cluster to much space between widgets and/or content...

Package filament/filament Package Version v3.2.85 Laravel Version v10.48.12 Livewire Version v3.5.0 PHP Version 8.3.7 Problem description When using a Cluster with a lot of menu items. all pages an...

shenntek•2mo ago

i've also created a cumbersome filament repo for this 😥
screenshot is here:

shenntek•2mo ago

https://github.com/filamentphp/filament/issues/11909

GitHub

Widgets in Cluster have to much spacing when long list of cluster s...

Package filament/filament Package Version v3.2.50 Laravel Version v10 Livewire Version No response PHP Version 8.3 Problem description When i have a cluster with a lot of submenu's a Resource L...

shenntek•2mo ago

shenntek•2mo ago

https://github.com/filamentphp/filament/pull/13052 fixed in this PR

GitHub

Fix issue when Cluster large Submenu items makes content grid align...

Description Fix issue when Cluster large Submenu items makes content grid align items centered instead of start. adding the "md:items-start" class fixes problem Visual changes BEFORE: AF...

Gaming

Programming

Too much space between Widgets and Content when having Clusters (submenu)