Fix button group borders

[janno42]

In several places we have button groups where not all btns are next to each other in the HTML code, so the CSS styling gets a bit weird. Either the border radii don't match (when setting the border on the grouping element) or the inner borders, where two buttons touch each other, are doubled (when setting the border on the buttons).
Some examples:

• language selection buttons in the navbar (border on grouping element)
• decision buttons and flag buttons on the text answer review page (border on buttons)

The expected styling would make sure that the radii match and that the inner borders are not doubled.

[fekoch]

@janno42 Did you mean those buttons with the second example?

Because here bootstrap by default "deduplicates" the innter borders by setting a negative margin.
Should I override bootstrap's implementation by something that fully removes the borders?

[richardebeling]

As discussed offline, all to the best of my knowledge: Yes, that button group is one that the issue refers to.
In the current version, afaik, we only have the "border radius" issue, i.e. the button is not fully "filled" to the border. If that is fixed, there shouldn't be any need for changes to the border, I think the border-issue only occurred in another attempt to fix this border-radius issue.

(For reference: This is what is currently rendered on main for me, the borders look fine, but there is a very subtle border radius filling issue):

[fekoch]

There are two cases for this issue:

1. The buttons are nested inside form-tags (Navbar)

I fixed those buttons by removing all borders and border radii from the .btn and moving it into the .btn-group. This is done:

2. General box-shadows inside rounded corners:

It seems like if you have a inset box-shadow inside a button with rounded corners, it will not be rendered correctly in Firefox:

It seems like this is not an issue with Chromium:

As this issue is with the rendering of the HTML itself, the only solution I can think of, is to switch to background-image: radial-gradient(...) instead.

[janno42]

It looks like parts of the original issue don't occur anymore. Sorry that we didn't include screenshots. The button's "filling" didn't reach the border in the corners, visually impacting even when not zooming in too much. This now looks fine for me in both Firefox and Chrome.

The issue also includes this situation on the "full" view on the text answer review page where (only some? - here between "Undecided" and "Delete") borders are doubled:

And in this case it looks even more weird, because buttons with different border colors overlap:

[janno42]

I'd say the general box-shadows inside rounded corners aren't a problem we need to address.

[fekoch]

I am not sure if fixing the button overlap should be in the scope of this project. It seems like and underlying issue in Bootstrap and they do not plan to fix it: twbs/bootstrap#25888

Maybe I can get the suggested fix to work, but if not an alternative would be to use multiple single-buttons or a styling that works without "visible" borders. (Like I used for the other buttons)

TODO@Self:

• Try to utilize jamesiscool's fix

[fekoch]

It looks like parts of the original issue don't occur anymore. Sorry that we didn't include screenshots. The button's "filling" didn't reach the border in the corners, visually impacting even when not zooming in too much. This now looks fine for me in both Firefox and Chrome.

The issue also includes this situation on the "full" view on the text answer review page where (only some? - here between "Undecided" and "Delete") borders are doubled:

And in this case it looks even more weird, because buttons with different border colors overlap:

Just a quick note: For me the issue occurs only when setting my screen to 125% scaling (instead of 100%).