Musicbox WebClient Interface Changes

I’m using Mopidy with MusicBox WebClient in Home Assistant to control my Multiroom audio setup at home.

I find the MusicBox WebClient interface perfect for my use, well almost perfect.
I’m using an iFrame to load the MB WebClient.

What I would like to do is shrink the height of the “buttons” (Now Playing, Queue, Playlists et al) so they take up less realestate. If I could shrink them by half their current size I could get all 6 in the frame without a scroll bar. Maybe move the icon to the same line as the “button title”?

I didn’t know if this would count as an ‘issue’ to open on the github page.

I get what you are saying but what would be the solution? Halfing the height is very specific to what you want. What if in the next release we add a load more buttons?

Would it be helpful if you could force the small-screen view instead? I think the buttons are automatically hidden in that view.

Yes half height buttons are a very specific use case, likely by just me :slight_smile:

I’m not sure how the button sizes are controlled but is there a way to make them dynamic based on the screen size with a max and min size restraints? I know this is possible with CSS but I don’t know what’s under the hood for MB WebClient.

If I were to go poking around to see what I might be able to do, do you know where I might find the MB WebClient files on my computer?

Probably. Much of the interface is already dynamic based on screen size but I think only for width and general arrangement. These media-queries are somewhere in the css. If you do a sudo mopidyctl deps it’ll point to where the mopidy-musicbox-webclient files live.

Well I’ve been playing around with Chrome’s Console and found a change that might work for me.
In this block:

@media (max-width: 35em)
.ui-responsive .ui-block-a, .ui-responsive .ui-block-b, .ui-responsive .ui-block-c, .ui-responsive .ui-block-d, .ui-responsive .ui-block-e {
width: 100%;
float: none;

if I comment out the width and float I get small boxes in 2 columns which I think might work perfectly for me.

I found the entries in the file and commented them out.
I’m not seeing any changes though, the entries I commented out are still showing up and the layout hasn’t changed.
Do I need to reload something? I’m not overly familiar with Python and virtual environments.

I can’t remember if you need to restart Mopidy, I don’t think you do… Check Chrome isn’t caching these files, I think there’s a tick-box somewhere in the Chrome developer tools to disable caching while dev tools are open.

I tried restarting Mopidy but that didn’t change things.
There must be another location for the CSS entries I commented out as they are still showing up when I go into the console.

edit: I found a second entry hiding in the .min.css file

Is it just one browser that you’re talking about? eg a tablet on the wall? Some browsers allow (or used to allow) you to add custom CSS for specific sites. I think there are currently add-ons for Firefox that let you do it.

1 Like

That’s a really good idea.

That’s a great idea, unfortunately it’s for a number of devices.
I’ll just need to keep in mind that when I update I will need to update the css files.

Here’s what I ended up with in the end. I like it as I was able to eliminate scrolling.


How are you using it with Home Assistant? Is Mopidy running as a Home Assistant add-on? If so, are you using the ingress feature to load it within the HA UI?

I’m not using so no add-on for mopidy. I’m using an iframe in HA to display the Musicbox Webclient.
The iframe is inside a vertical-stack card with entities under the iframe for volume control for each snapcast clients. I had a master volume control but that seems to be ‘broken’ right now.