Button Group inside Grid renders too small

[stefankempf]

Bug description

I added a button group inside a grid fieldtype and placed it to 50% width. I also have a conditionally shown textfield in the grid row (the issue is also happening when the textfield is always shown).

How to reproduce

Add a grid fieldtype and place a button group with two options and a text field in it.

handle: its_me_the_button_group
            field:
              fields:
                -
                  handle: type
                  field:
                    options:
                      text: Text
                      umbruch: Umbruch
                    default: text
                    type: button_group
                    display: Typ
                    width: 50
                    listable: hidden
                    instructions_position: above
                    visibility: visible
                    replicator_preview: true
                    hide_display: false
                    validate:
                      - required
                -
                  handle: text_fragment
                  field:
                    input_type: text
                    antlers: false
                    type: text
                    display: Text-Fragment
                    width: 50
                    listable: hidden
                    instructions_position: above
                    visibility: visible
                    replicator_preview: true
                    hide_display: false
                    validate:
                      - 'required_if:{this}.type,text'
                    if:
                      type: 'equals text'
              mode: table
              reorderable: true
              fullscreen: true
              type: grid
              display: Animation
              listable: hidden
              instructions_position: above
              visibility: visible
              replicator_preview: true
              hide_display: false

Logs

No response

Environment

Statamic
Addons: 0
Antlers: runtime
Sites: 1
Version: 4.55.0 PRO

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

Runtime (default)

Additional details

No response

[duncanmcclean]

Thanks! Although, this is a duplicate of #9044.

[stefankempf]

Hi @duncanmcclean I'm not sure, this is a duplicate. The button group shouldn't wrap, the row inside the grid fieldtype should just be wide enough to fit both buttons, since I've set both elements to 50% width.

I can give you some more context: The td element containing the button group has a correct attribute width="50%" but its getting overwritten by the class .grid-table td.button_group-fieldtype which sets width: 1%;

No idea why this class is set, but thats where the error is coming from at least: https://github.com/statamic/cms/blob/4.x/resources/css/components/fieldtypes/button-group.css

[stefankempf]