Form Tab layout with columns options should not render section component on full span

[theanadimukt]

Package

filament/forms

Package Version

V3.0.0

Laravel Version

v11.27.2

Livewire Version

v3.0.0

PHP Version

PHP 8.2.0

Problem description

As per stated on Filament documentation Form - Tabs layout - Using Grid Columns Within A Tab, component inside tabs should display in numbers of given columns .

However when put Section component inside tab with 3 columns option, it doesn't work as expected, instead it renders section in full span. There should have three columns of three section, but it's rendering three rows.

Tabs::make('Tabs')
    ->tabs([
        Tabs\Tab::make('Tab 1')
            ->schema([
                Section::make('Sunday')
                ->schema([
                    //
                ]),
            Section::make('Monday')
                ->schema([
                    //
                ]),
            Section::make('Tuesday')
                ->schema([
                    //
                ]),
            ])
            ->columns(3),
        // ...
    ])

Please check below screenshot

Expected behavior

Expected rendering should be something like below

Steps to reproduce

1. Create resource
2. Add below scripts to your form method

Tabs::make('Tabs')
    ->tabs([
        Tabs\Tab::make('Tab 1')
            ->schema([
                Section::make('Sunday')
                ->schema([
                    //
                ]),
            Section::make('Monday')
                ->schema([
                    //
                ]),
            Section::make('Tuesday')
                ->schema([
                    //
                ]),
            ])
            ->columns(3),
        // ...
    ])

3. go to panel UI
4. Click on resource menu
5. Click on New and check tab

Alternatively,

1. checkout reproduction repository
2. login to admin panel
3. go to Business resource menu
4. click on new
5. There you will see tab with section rows

Reproduction repository (issue will be closed if this is not valid)

https://github.com/theanadimukt/filament-tab-issue

Relevant log output

No response

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[gheorghelupu17]

Hi @theanadimukt in the set up of section component you have $this->columnSpan('full'); This is the reason

It's easier to set the columnSpan to 1

Tabs::make('Tabs')`
    ->tabs([
        Tabs\Tab::make('Tab 1')
            ->schema([
                Section::make('Sunday')
                 ->columnSpan(1)
                ->schema([
                    //
                ]),
            Section::make('Monday')
                 ->columnSpan(1)
                ->schema([
                    //
                ]),
            Section::make('Tuesday')
               ->columnSpan(1)
                ->schema([
                    //
                ]),
            ])
            ->columns(3),
        // ...
    ])

[danharrin]

Yeah, just an API stylistic choice that usually you want Sections to be full width so that is the default

[theanadimukt]

Thanks for quick response @gheorghelupu17 @danharrin and @team Thank you for creating such an awesome package ❤️