Feature: Layout table or row

[Coernel82]

I would like to display my values in one single row. As I do not have real programming knowledge in java I consulted ChatGPT with succes. So what my idea is:

if config layout = row then display row

The code to achieve this below. Really only the config option has to be added and the if condition. Also so far there is no space between the values. I "hacked" this with using an invisible space as suffix in the settings however I guess CSS should solve this properly.

And it looks like this (real screenshot):

 {
    const wrapper = document.createElement("span");
    wrapper.className = "row";

    if (subscriptions.length === 0) {
      wrapper.innerHTML = loaded ? translate("EMPTY") : translate("LOADING");
      wrapper.className = "row small dimmed";
      this.log(name + ": No values");
      return wrapper;
    }

    subscriptions
      .filter((s) => !s.hidden)
      .sort((a, b) => {
        return a.sortOrder - b.sortOrder;
      })
      .forEach(function (sub) {
        var subWrapper = doc.createElement("span");
        subWrapper.className = "column";

        let colors = getColors(sub);

        // Label
        var labelWrapper = doc.createElement("span");
        labelWrapper.innerHTML = sub.label;
        labelWrapper.className = "align-left mqtt-label";
        labelWrapper.style.color = colors.label;
        subWrapper.appendChild(labelWrapper);

        // Value
        tooOld = isValueTooOld(sub.maxAgeSeconds, sub.time);
        var valueWrapper = doc.createElement("span");
        var setValueinnerHTML = convertValue(sub);
        valueWrapper.innerHTML = setValueinnerHTML;
        valueWrapper.className =
          "align-right medium mqtt-value " + (tooOld ? "dimmed" : "bright");
        valueWrapper.style.color = tooOld
          ? valueWrapper.style.color
          : colors.value;
        subWrapper.appendChild(valueWrapper);

        // Suffix
        var suffixWrapper = doc.createElement("span");
        suffixWrapper.innerHTML = sub.suffix;
        suffixWrapper.className = "align-left mqtt-suffix";
        subWrapper.appendChild(suffixWrapper);
        subWrapper.style.color = colors.suffix;
        if (setValueinnerHTML !== "#DISABLED#") wrapper.appendChild(subWrapper);
      });

    return wrapper;

  }
});