Autoscale in button group

Dashboard
1

hello everyone,
i am working on a project with dashboard 2.0 and node red.
I use a button group with fixed length and width but when I view this on another smaller screen, buttons fall off the screen and are no longer visible.

does anyone know if I can solve this with css? for example, that it scales automatically?
Thanks in advance!

(big screen)
button group on normal screen

(smaller screen)
button group on smaller screen

code of button group:

[
    {
        "id": "5d2d822f972e8e40",
        "type": "ui-button-group",
        "z": "965a430273dfd2b1",
        "g": "980fc871993347ed",
        "name": "aems-ng",
        "group": "cdd6b68663695cb1",
        "order": 8,
        "width": "10",
        "height": "1",
        "label": "",
        "className": "",
        "rounded": true,
        "useThemeColors": true,
        "passthru": false,
        "options": [
            {
                "label": "open",
                "icon": "",
                "value": "0",
                "valueType": "num",
                "color": "#009933"
            },
            {
                "label": "1",
                "icon": "",
                "value": "8",
                "valueType": "num",
                "color": "#999999"
            },
            {
                "label": "2",
                "icon": "",
                "value": "16",
                "valueType": "num",
                "color": "#ff6666"
            },
            {
                "label": "3",
                "icon": "",
                "value": "24",
                "valueType": "num",
                "color": "#009999"
            },
            {
                "label": "4",
                "icon": "",
                "value": "32",
                "valueType": "num",
                "color": "#cccc00"
            },
            {
                "label": "5",
                "icon": "",
                "value": "40",
                "valueType": "num",
                "color": "#ff33cc"
            },
            {
                "label": "6",
                "icon": "",
                "value": "48",
                "valueType": "num",
                "color": "#cc6600"
            },
            {
                "label": "7",
                "icon": "",
                "value": "56",
                "valueType": "num",
                "color": "#99ff66"
            }
        ],
        "topic": "topic",
        "topicType": "msg",
        "x": 320,
        "y": 460,
        "wires": [
            [
                "d0eed0c78c8666fc"
            ]
        ]
    }
]
2

What version of the dashboard do you have?

Are you using Firefox?
A fix for this was discussed in March
As far as I know no there's been no change to the dashboard to implement this by default.

3

I have version 1.24. 2 and I do use Firefox, but it doesn't work well in Edge either.
Could this also be because I have fixed the height and width?

4

This is likely it, if you've set the height of the widget to be 1, then it will fix to that height accordingly. If you change it to auto, then it will fit to it's content.