Improving the layout of my control hints

,

The issue

In the game I’m developing, I have a ribbon that sits at the bottom of the screen that shows you what button/key does what.
image
This was fine until I started paying attention to localizing the game, at which point I realized that the pre-made GUIs weren’t exactly scalable and tend to cause the text to overlap especially in cases where languages don’t have a direct analog to the English version of the word in question.

Layout design

The control hints are automatically laid out using a UIListLayout.

Here is the contents of a single button:
image
Here is the contents of the “double” button e.g. the Cycle Selection button:
image

Each Frame is a pre-made element with a fixed Scale value that is adjusted to fit the “Description” text label. In essence, the element that actually determines the size of the text label is the ImageLabel. This means that I can’t scale the text properly.

Here is an image of the actual UI elements in question, with the backgrounds of the relevant objects highlighted:
image

There are no Offset values used. It is all Scale values.

Goals

  • Get button hints to be scalable as a system rather than having to pre-make them.
  • Allow button containers to scale on the X axis to fit their text label.
  • Preferably use a scriptless solution, though I have a feeling that I’m going to have to script something.

edit: left a fragment of a thought that i should have cleaned up earlier

There’s #help-and-feedback:art-design-support
Which Is Used For UI Design Too :sweat_smile: