admin field width does not work (CSS specificity bug)

[brunocrosier]

Link to reproduction

No response

Payload Version

beta

Node Version

20

Next.js Version

beta

Describe the Bug

This line of CSS is explicitly setting width: 100%!important, meaning that when you do something like

admin: {
  width: '50%'
}

although the width: 50% is actually set on the element, the width: 100%!important wins out, and we can't have fields of custom width
the

Reproduction Steps

Create a collection and add

admin: {
  width: '50%'
}

to any field

### Adapters and Plugins

_No response_

[AlessioGr]

Can't reproduce this issue - works for me, see screenshot, Can you provide a reproduction / a field config where this issue happens?

[brunocrosier]

ah yes i'm sorry it seems like the issue is actually something else, and only happens when the widths of a field inside a row add up to 100%

{
            type: 'row',
            fields: [
                {
                    name: 'SKU',
                    type: 'text',
                    admin: {
                        width: '50%',
                    }
                },
                {
                    name: 'taxRate',
                    type: 'relationship',
                    relationTo: 'taxes',
                    hasMany: false,
                    admin: {
                        width: '50%',
                    }
                },
            ]
        },

So actually, the fix should be to change from flex-grow: 1; to flex: 1; (which is shorthand for also adding flex-shrink: 1; flex-basis: 0%;

[brunocrosier]

Created PR here: #7869

[GermanJablo]

Hi @brunocrosier. I still cannot reproduce.

Also, if I change flex-grow to flex like you did in your PR, the relationship doesn't hold if it's uneven (say 10% and 40%), but instead, they keep taking up half of each other.

Maybe you have some CSS of your own that could be conflicting?

[brunocrosier]

Hey @GermanJablo which version of payload v3 beta are you using?