Alerts Panel got really bad after Grafana update

[PedroRibas13]

Before upgrading Grafana to vs 11.2, the Zabbix alerts dashboard was perfect. After the upgrade, the dashboard looked horrible and was completely impractical to use, as the simplicity of the dashboard was what made it great to use.

Before update

After

[mplm17]

Same here

[mplm17]

Dig a little about this problem. It seems that the following css blocks are missing in the most recents versions of grafana, preventing the zabbix problems panel to display normally.

.alert-rule-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none
}
.alert-rule-item {
    align-items: center;
    background: #22252b;
    border-radius: 4px;
    box-shadow: none;
    display: flex;
    height: 100%;
    margin-bottom: 4px;
    padding: 4px 8px;
    width: 100%
}
.alert-rule-item__icon {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0 4px 0 2px;
    width: 40px
}
.alert-rule-item__icon .fa,.alert-rule-item__icon .icon-gf {
    font-size: 200%;
    position: relative;
    top: 2px
}
.alert-list__btn {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 2px
}

Maybe it's related to the legacy alerting depecration but I'm not sure.

Workaround:

Add this:

.alert-rule-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;list-style-type:none}.alert-rule-item{align-items:center;background:#22252b;border-radius:4px;box-shadow:none;display:flex;height:100%;margin-bottom:4px;padding:4px 8px;width:100%}.alert-rule-item__icon{align-items:center;display:flex;justify-content:center;padding:0 4px 0 2px;width:40px}.alert-rule-item__icon .fa,.alert-rule-item__icon .icon-gf{font-size:200%;position:relative;top:2px}.alert-list__btn{align-items:center;display:flex;justify-content:center;margin:0 2px}

Right before .alert-rule-item__body in your grafana/public/build/grafana.dark.*.css (or grafana.light.*.css, depending on your configuration)

Keep in mind that these css files are built at each grafana update. So you will have to re-do the workaround until this issue is fixed.