Turns out its Firefox not getting the styling right. happened to look on Edge and it looks the same now. So i had a look to see if i can find a solution and i think i found one.
you should just be able to change the background-position: right; to background-position: 96%; in the stack in card (that contains all other cards) it will then be nudged ever so slightly to the left allowing to show all 4 corners 
oh and if you wanted to swap only artist and track whilst music is playing you can do this instead (i admit it is a bit weird for it to say Idle and then Office Speaker for example underneath swapping the default way):
Code to replace current mushroom media player card
- type: custom:mushroom-media-player-card
entity: media_player.office_speaker
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
{% if not states(config.entity) in ['idle', 'off'] %}
color: transparent !important;
position: relative;
{% endif %}
}
.secondary {
{% if not states(config.entity) in ['idle', 'off'] %}
color: transparent !important;
position: relative;
{% endif %}
}
.secondary:after {
{% if not states(config.entity) in ['idle', 'off'] %}
content: '{{state_attr(config.entity, 'media_artist')}}';
{% endif %}
position: absolute;
left: 0px;
color: black;
}
.primary:after {
{% if not states(config.entity) in ['idle', 'off'] %}
content: '{{state_attr(config.entity, 'media_title')}}';
{% endif %}
position: absolute;
left: 0px;
color: black;
}
.: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
