Sure you’re right. Here is my jsfiddle: https://jsfiddle.net/0cquhr4k/
I have made some progress. If I use “q-btn-group flat”, it looks okay as long as you do not hover over the toolbar.
Since the click target isn’t what you would expect, I think it is bad UX and the buttons really should take up all the space. If I use “q-toolbar class=“q-pa-none”” the padding left and right disappears, but the y padding seems to be caused by an inner element that I cannot identify.
I am clueless why my css for hiding the downarrow is not working.
The last problem is that q-badge is positioned to its parent q-btn, but not the q-icon