Object-Detail: Fix icon layout in handled/unreachable soft state balls

[flourish86]

Describe the bug

The icons in handled/unreachable balls in soft state balls are misaligned and should be fixed.

To Reproduce

1. find an object that is handled/unreachable and is in soft state
2. open the detail view of said object (state-ball size-ml with an icon)
3. recognize the misaligned icon (See screenshot)

The state-ball is too small to provide enough space for the icon to be displayed in a reasonable size.

Expected behavior

The state ball provides enough space to contain the icon

Screenshots

With non soft state objects the state-ball (size-l) is big enough to contain the icon.

Assumed #1042 has been fixed, the layout is fine.

A slightly increased state ball size for displaying the soft state would provide a solution to the misaligned icon. Whether we should

a) introduce a new ball size
b) change the current .size-ml
c) different design

is to be discussed.

[flourish86]

This is how, the icons look on Mac Browsers

Safari

Brave

Firefox

Safari and Chrome seem to have an absolute minimum rendered font-size of 9px for accessibility reasons. Altough this can be configured in the settings, the changes won't apply, if set to less than 9px. Even if it would apply, we should refer to the settings that are by default, since most users won't change this.

Safari

Brave

Effectively calculated font-sizes

The font-size calculated by our styles, are effectively font-size: 7.826087px.

Safari

Brave

For consistent display on all browsers we should therefore – as pointed out in the OP – , increase the state-balls (currently used is ball-size-ml) to width: 1.25em; height: 1.25em and set the font-size of the icon to the default minimum of 9px.

From OP:

A slightly increased state ball size for displaying the soft state would provide a solution to the misaligned icon. Whether we should

a) introduce a new ball size
b) change the current .size-ml
c) different design

is to be discussed.

[flourish86]

Add On
The Chromium engine has the minimum font-size feature built in, but it seems to vary between different distributions, whether this I enabled by default or not. It seems that it is not enabled in the default Chrome Browser, in Brave it is, though.

This is how it looks in Chrome by default