ToggleButtons inside a Table Repeater overlap other elements

[thaqebon]

Package

filament/filament

Package Version

v5.3.5

Laravel Version

v12.54.1

Livewire Version

v4.2.1

PHP Version

8.4.18

Problem description

When using the ToggleButtons component inside a Repeater configured with the table layout, the buttons overflows and overlaps adjacent elements, if the column width is constrained (e.g., ->width('10%'))

Expected behavior

The ToggleButtons component should stay contained within its column boundaries

Steps to reproduce

Repeater::make('data')
    ->table([
        TableColumn::make('Title'),
        TableColumn::make('Cycle')->width('10%'),
    ])
    ->schema([
        TextInput::make('title'),
        ToggleButtons::make('cycle')
            ->options([
                'monthly' => 'Monthly',
                'annually' => 'Annually',
            ])
            ->grouped()
            ->inline(),
    ]),

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

https://github.com/thaqebon/fi-toggle-buttons-overflow

Relevant log output

[thaqebon]

When I investigate this, here is the core issue:

• Why it happens: Applying auto-cols-fr (which acts as minmax(0, 1fr)) to the parent div changes the natural behavior of the grid. It ignores the content width and cell padding when constrained.
• How your fix works: Changing it to auto-cols-auto or auto-cols-[1fr] restores the natural behavior. It forces the grid to respect both the minimum required space and the padding, keeping the buttons perfectly contained.