Ability to autosize text container

It would be great to have a way to render a text on a background with some padding around it.

I’ve tried an example from docs, however, it seems that auto width mode actually sets the maximum width of the container, leaving the gap on the right:

What I would like to achieve is an ability to render a label with some background around it (similar to Bootstrap labels for example)

Here is a hacky solution that I came up with:

import AFRAME from 'aframe';


const fontWidthFactor = 1000;

AFRAME.registerComponent('text-auto-width', {
    dependencies: ['text'],
    schema: {
        padding: {default: 0}
    },
    init() {
        // Hook into text component's updateLayout method
        const textComponent = this.el.components.text;

        const textMesh = this.el.object3D.children[1];

        if (textMesh.geometry.layout) {
            resize(textMesh.geometry.layout);
        } else {
            const origUpdate = textComponent.updateLayout;

            textComponent.updateLayout = (data) => {
                origUpdate.call(textComponent, data);

                resize(textMesh.geometry.layout);
            };
        }

        const resize = (layout) => {
            const {value, width} = this.el.getAttribute('text');

            const metrics = layout.computeMetrics(value, 0, value.length, Math.INT_MAX);

            const actualWidth = metrics.width * width / fontWidthFactor + this.data.padding * 2;

            const geometry = this.el.getAttribute('geometry');

            this.el.setAttribute('geometry', {...geometry, width: actualWidth});
        }
    }
});

Start with the text component's auto-width behavior and the provided text-auto-width JavaScript example, especially its layout measurement and geometry resizing. Done means a text label can render with a background sized to the text plus padding, without the reported gap on the right.