Chart interval rendering breaks depending on browser window width (interval disappears / labels shift to far left)

Bug Reports
1

Hi Intervals.icu team,
I’m seeing a rendering issue in the charts where the displayed intervals depend on the browser window width.

What happens (actual behavior):

  • With a “normal” / narrower window width, the intervals in the chart are displayed correctly.
  • When I make the browser window wider, the interval overlay/segment in the graph disappears, and the related values/markers jump to the far left edge of the chart (as if the x-position is miscalculated).

Expected behavior:

  • Intervals should remain correctly positioned and visible regardless of browser window width / responsive layout changes.

How to reproduce:

  1. Open the activity page (where intervals are shown in the chart).
  2. Resize the browser window from narrower to wider (or move the window to a larger monitor).
  3. Observe that the interval display breaks at certain widths (interval disappears and values align on the left).

Notes:

  • This seems strongly tied to responsive resizing / chart reflow, not to the activity data itself.
  • I attached a short video showing the issue while resizing the window.

Environment:

  • OS: Windows 11
  • Browser(s): Chrome (latest)
  • Screen resolution: 4k

Attachment: Video demonstrating the issue (window resize → interval disappears + values jump left): https://in7.futureweb.at/temp/intervals.mp4

2

Improvements has been made! Do a reload on your browser and you should see better behaving data labels :slight_smile: Thanks for the detailed bug report! It really speeds up the bug hunting.

1 Like
3

Hi @eva,

thanks for the super quick response! Being a coder myself, I really appreciate how important detailed bug reports are — I’m guilty of reminding my coworkers about that often enough :see_no_evil_monkey::rofl:

Unfortunately it still doesn’t seem fully fixed on my end. Even after a dedicated cache flush (and with “Disable cache” enabled in DevTools), the last interval still disappears / the labels jump all the way to the left once I hit the breakpoint at 1340px window width.

  • Up to 1339px everything looks fine
  • From 1340px and above it breaks

Could you maybe take another look at it?

Thanks a lot — greetings from Tyrol!
Andreas

4

I’m having similar issues over here:

Screenshot_20260130_004232
Screenshot_20260130_004232513×380 20 KB

Screenshot_20260130_004242
Screenshot_20260130_004242474×365 16.9 KB

  • OS: Kubuntu 24.04
  • Browser: Chrome (144.0.7559.96)
  • Browser window always maximazed
5

Not 100% sure, but I think this behaviour started when the TOD and elapsed time where added at the top left.

6

Can you link me activities that has this bug with intervals?

7

@MedTechCD That must be it indeed. Since everything ended up overlapping, I hadn’t even noticed this new (and much anticipated) feature!

@Eva, in my case this can be observed in any activity. In addition, more than one button in the side menu remains highlighted at the same time. Below is a screenshot and a link:

Screenshot_20260130_102020
Screenshot_20260130_102020663×554 63.3 KB

8

@eva

1 Like
9

browser viewport width >1040 - interval rect width get’s calculated to NaN - that’s why it’s jumping all the way to the left:

image
image1138×140 8.23 KB

10

Actually I have a working solution now, we need to push it to production still :slight_smile:
You two had some custom charts that messed up with the data labels, I dont have them bugged so thats why I missed the bug in the first round. Hopefully all is sorted now (when we get the bug fix deployed).

1 Like
11

Allright guys, the new version is deployed and live. Please test and report back!

1 Like
12

Alright, this already looks a lot better than before — no more layout jumping depending on the window size. :slightly_smiling_face:

One thing I still noticed: on the left, where the time is shown, the hour gets cut off for me (see screenshot).

Also, is there any way to configure whether the left side shows the total elapsed time or only the recorded/moving time? Would be neat. :sweat_smile:

image
image2448×550 58.4 KB

1 Like
13

Depends on the chart setup. If you have a left axis name that takes up enough space, the left grey part is a bit wider and it fits. A fix for this would be welcome.

1 Like