Macro button style changes

[Q1WP]

What about this version?

It leaves the overflow hidden and sets a button width.

Desktop view:

Mobile view:

[jcoffland]

Visually, I prefer the fixed width buttons in a grid. But, this does let you use longer names. My intent was that the user would be forced to used names that fit like. Rot Laser instead of Rotary Laser.

Another idea is to scale the text automatically to fit. I wasn't sure if this was possible at first but there is a way using SVG. We would go back to the grid and replace the text in the button with something like this:

<svg viewBox="0 0 56 18">
  <text x="0" y="15">Rotary Laser</text>
</svg>

Actually we would need to change a line in vue-control.pug from:

| {{macro.name || ($index + 1)}}

To:

svg(viewBox="0 0 56 18")
  text(x="0" y="15") {{macro.name || ($index + 1)}}

I'm not sure what the numbers above should be. 56 is the button width in SVG space and 18 is it's height. 15 is the vertical offset of the text with in the SVG. In theory, it should automatically scale with the text size. It might be necessary to add something like this to the style:

.macros svg
   width 100%

The hope would be that the font just shrinks as the text gets longer but the button stays the same size. Totally untested though.

[Q1WP]

I'm not really a fan of different size text on a page as the text is the focal point and provides relative info to the user. I understand the uniformity of button sizes, but being a production user, functionality and ease of use is priority to me. Obviously this is your project to choose which direction to go, but I definitely can't help with the css/svg setup, as that is way over my head.