JSON payloads with arrays/long strings do not wrap and overflow container

[draperbr]

First off, very cool lightweight tool. Having the history easily available will make debugging occasional issues so much easier. Too many times I've found myself waiting for the next pub, or digging through logs to try and reconstruct.

That being said, the data displayed in the UI can be a bit wonky. When displaying the MQTT payloads, certain JSON structures (especially arrays or nested objects) don't wrap correctly and end up overflowing the container.

Simpler/flat JSON payloads render fine, but more complex payloads show as a single long line and exceed the width of the container.

The one on the left has this JSON:

[
   {
      "last_login":"2026-03-25T10:49:05-04:00",
      "name":"[redacted]"
   },
   {
      "last_login":"No logins",
      "name":"[redacted]"
   }
]

The one on the right is the same structure.

[855princekumar]

Thanks a lot for sharing this, really appreciate the detailed explanation and example.

I actually came across this issue earlier and had implemented a fix for handling JSON formatting, especially nested structures and arrays, so it is a bit surprising to see this still occurring.

Just to clarify, did you encounter this while running SenseHive via:

• Docker image
• or native Python execution (python app.py)?

This will help identify if the issue is specific to a particular setup or version.

Also, as an interim note, earlier I had temporarily adjusted the formatting to work more reliably with flat (non-nested) JSON payloads. While the UI was later improved to handle nested structures more robustly, it would be helpful if you could try publishing a simple non-nested JSON payload once, just to cross-check the behavior.

That said, nested JSON should absolutely work as expected, so I will re-validate this on my end and ensure it is handled correctly across setups.

Thanks again for pointing this out, really helpful for improving the overall UX.

[draperbr]

Oh yeah, should have given some details about setup. I'm running it as a docker in Ubuntu 24.04.

I figured I should probably check multiple browsers as well. It happens in both firefox-based browsers and chrome-based browsers, but seems much worse in firefox. In chrome it only happens on really long JSON lines. The shorter ones render better than in firefox.

In fact, the JSON block I gave you above (or very similar) rendered fine in Chrome. Here 's an example of one that breaks formats poorly on all browsers I checked:

{
"diun_version":"##.##.#",
"hostname":"############",
"status":"update",
"provider":"docker",
"image":"lscr.io/linuxserver/######:#####",
"hub_link":"https://github.com/linuxserver/#############/packages",
"mime_type":"application/vnd.oci.image.index.v1+json",
"digest":"sha256:################################################################",
"created":"2026-03-29T17:22:51.808102695Z",
"platform":"linux/amd64",
"metadata":{
"ctn_command":"/init",
"ctn_createdat":"2026-03-08 14:10:43 -0400 EDT",
"ctn_id":"################################################################",
"ctn_names":"######",
"ctn_size":"0B",
"ctn_state":"running",
"ctn_status":"Up 3 days",
"current_tag":"#.#.#",
"releases":"https://github.com/######/######/releases/"
}
}

[855princekumar]

Thanks a lot for the detailed follow-up, this is really helpful.

The browser-specific behavior you pointed out is a very valuable insight. I initially tested primarily on Chromium-based browsers, so this difference in rendering, especially in Firefox, is something I had not fully accounted for.

The example you shared also highlights another important factor, which is long unbroken JSON lines and nested structures causing inconsistent wrapping across browsers. This is definitely something I need to handle more robustly on the frontend.

I will add this payload as a test case and validate rendering across multiple browsers to ensure consistent behavior. I will also revisit the styling and formatting logic to better handle long lines and nested data without overflow issues.

If you have any ideas or would like to contribute a fix, feel free to open a PR, that would be very welcome. In the meantime, I will also be working on resolving this.

Thanks again for sharing this level of detail, it really helps in improving cross-browser reliability.