Allow TextInputColumn to expand full width of table column

[tanthammar]

Description

• This PR makes all text input columns, expand full with of the table cell, by default. Which in my opinion is the expected behaviour.
• Using TextInput::make('foo')->inline(), disables full width.

I think I've tried every possible option to make a TextInputColumn expand full width of its table column.

TextInputColumn::make('foo')->searchable()
            ->grow(),
            ->extraInputAttributes(['class' => 'w-full min-w-fit'])
            ->extraInputAttributes(['style' => 'width: 100%'])
            // and more...

Visual changes

Before, no matter how I tried to expand the column width

After, just added ->grow() to the column

Functional changes

• [ x ] Code style has been fixed by running the composer cs command.
• [ x ] Changes have been tested to not break existing functionality.
• [ x ] Documentation is up-to-date.

Additional css suggestion

/* auto grow width of table cell inputs to fit its content */
td.fi-ta-cell :is(input.fi-input), td.fi-ta-cell :is(select.fi-select-input) {
    field-sizing: content;
}

[danharrin]

@zepfietje wdyt about the additional suggestion? I think it's pretty smart, the way the text input column overflows is weird ATM I think. Prob also needs similar treatment on Select?

[zepfietje]

The field-sizing CSS API is amazing, but browser support isn't there yet unfortunately...
Been wanting to use that for our autosizing textarea too. 🥺

[danharrin]

Well it would use the existing behaviour if that property is not available, right? And at the moment we have no autosizing on input columns. So I guess it doesn't hurt?

[zepfietje]

Inconsistent behavior across browsers could still be a concern as devs/users may not be aware that the feature isn't supported on Firefox and Safari yet.

Apart from that, what would the UX be like exactly? Would the field grow in width when typing?

[tanthammar]

It would be great if you could accept the PR to solve the main purpose, to allow textInputColumns to expand full width of the cell.

The additional css stuff can easily be added to local proj css for those who wants it.
It does no harm. The browser simply ignores it.
And yes, it grows when typing.

[tanthammar]

Please consider adding min-widht: 125px (or something) td.fi-ta-cell :is(input.fi-input), td.fi-ta-cell :is(select.fi-select-input) to prevent them form completely hiding its content.

[danharrin]

@zepfietje I'm happy to handle all this, but can you please approve the direction?

• Add w-full to SelectColumn too
• Add min-w-48 to TextInputColumn and SelectColumn
• If the individual search inputs above columns don't have these classes, also add there

[zepfietje]

• w-full on the input doesn't grow the column, right?
• Could you share a screenshot of both the text input and select columns with min-w-48?
• I guess making the search inputs grow for columns that contain inputs is okay.

[danharrin]

It consumes the space in the column and doesn't grow the column

[zepfietje]

It consumes the space in the column and doesn't grow the column

Sounds good.

[danharrin]

@zepfietje

Screen.Recording.2024-11-30.at.08.37.40.mov

Screen.Recording.2024-11-30.at.08.40.04.mov