[Bug]: The preference modal bar layout is broken if button order is flipped

[MoritzLost]

Expected Behavior

With the preferences modal set to layout: bar and flipButtons: true, the button layout is broken:

The necessary button has additional margin to the top and right, but this only works in the default button order.

Current Behavior

Buttons lack spacing and are not of equal width.

Steps to reproduce

Use layout: bar and flipButtons: true under guiOptions.preferencesModal.

Proposed fix or additional info.

This could be fixed by using gap instead of margin to add some spacing between the buttons. This works regardless of flex-direction or grid-column settings.

Version

3.0.0-rc.15

On which browser do you see the issue?

Firefox

[orestbida]

Can confirm this is a bug!

Unfortunately the gap property is not supported in Safari < 14.1 when the flexbox layout is used: 8c01126.

[MoritzLost]

Unfortunately the gap property is not supported in Safari < 14.1 when the flexbox layout is used: 8c01126.

Ah, right – we dropped iOS < 15 a while ago, so we've been able to use gap in flex layouts.
Is there an official list of supported browsers? All I found is the note in the comparison between v2 and v3:

Supports modern browsers only

[orestbida]

Unfortunately a consent management tool needs to have a reasonably wide browser support, so we're stuck with margin.

I don't know about specific browser ranges, probably all the browsers that support flexbox/grid and es6+. The oldest supported Safari version is 11.3.

[MoritzLost]

@orestbida Got it, thanks! Might be a good idea to explicitly define browser support using browserslist.

[squareclouds]

@orestbida Got it, thanks! Might be a good idea to explicitly define browser support using browserslist.

yes!!! saying that v3 "Supports modern browsers only" is not helpful at all. a list with actual values would be good