Loadpoint UI: improve title visibility

[Maschga]

Fix #26212

📝 show loadpoint in two row style in lg breakpoint range (extracted from #20499)

\cc @naltatis

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• Consider disposing the loadpointTitleTooltip instance in unmounted (and possibly when the element stops overflowing) instead of only disabling it to avoid lingering tooltip state and potential memory leaks.
• The global resize and orientationchange listeners call updateLoadpointToolTip on every event; adding a small debounce or throttle would reduce layout thrashing from repeated scrollWidth/clientWidth measurements on rapid resize.
• In updateLoadpointToolTip, it may be safer to assert/guard that this.$refs.loadpointTitle is an HTMLElement (and not, for example, an array of elements) before accessing layout properties, to avoid runtime errors if the template changes.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Consider disposing the `loadpointTitleTooltip` instance in `unmounted` (and possibly when the element stops overflowing) instead of only disabling it to avoid lingering tooltip state and potential memory leaks.
- The global `resize` and `orientationchange` listeners call `updateLoadpointToolTip` on every event; adding a small debounce or throttle would reduce layout thrashing from repeated `scrollWidth/clientWidth` measurements on rapid resize.
- In `updateLoadpointToolTip`, it may be safer to assert/guard that `this.$refs.loadpointTitle` is an `HTMLElement` (and not, for example, an array of elements) before accessing layout properties, to avoid runtime errors if the template changes.

## Individual Comments

### Comment 1
<location> `assets/js/components/Loadpoints/Loadpoint.vue:343-349` </location>
<code_context>
+		window.addEventListener("orientationchange", this.updateLoadpointToolTip);
+		this.updateLoadpointToolTip();
 	},
 	unmounted() {
 		if (this.tickerHandler) {
 			clearInterval(this.tickerHandler);
 		}
+		window.removeEventListener("resize", this.updateLoadpointToolTip);
+		window.removeEventListener("orientationchange", this.updateLoadpointToolTip);
 	},
 	methods: {
</code_context>

<issue_to_address>
**suggestion (performance):** Dispose the Bootstrap tooltip instance on unmount to avoid potential leaks and dangling event listeners.

In `unmounted`, you clean up the window listeners but keep the Bootstrap `Tooltip` instance. Since tooltips attach their own listeners and references, also call `this.loadpointTitleTooltip?.dispose()` (and optionally set `this.loadpointTitleTooltip = null`) to fully release resources.

```suggestion
	unmounted() {
		if (this.tickerHandler) {
			clearInterval(this.tickerHandler);
		}

		// Dispose Bootstrap tooltip instance to avoid leaks and dangling listeners
		this.loadpointTitleTooltip?.dispose();
		this.loadpointTitleTooltip = null;

		window.removeEventListener("resize", this.updateLoadpointToolTip);
		window.removeEventListener("orientationchange", this.updateLoadpointToolTip);
	},
```
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[naltatis]

@Maschga Lets not do the tooltip. This is a user-controlled field. Nothing unexpected should be here the would require this. We dont have a reliable (non-complex) way of only showing the tooltip if needed (css layouting). Tooltips generally work sub-optimal on mobile devices.

[Maschga]

Nothing unexpected should be here the would require this

I added the tooltip because the user has no way of reading the complete loadpoint title if it has been truncated.
But I understand your point too. I'll revert it.

[naltatis]

Looks good. But I've just rediscovered a special case that we also need to handle:

/* breakpoint lg, tall screen, 2 loadpoints rows */
@media (min-width: 992px) and (min-height: 1450px) {
	.carousel--2 {
		grid-gap: 4rem;
		grid-template-columns: 1fr;
	}
}

/* breakpoint lg, taller screen, 3 loadpoints rows */
@media (min-width: 992px) and (min-height: 1900px) {
	.carousel--3 {
		grid-gap: 4rem;
		grid-template-columns: 1fr;
	}
}

We have special "tall-screen" styling. Mostly for wall mounted tablets. In these cases the preferred layout for the card header would be one-row, since space is available. If we could ignore older browser we could try container query css but these wall mounted tables often are old devices :/

[Maschga]

If we could ignore older browser we could try container query css but these wall mounted tables often are old devices :/

I'm happy to put in a little extra effort for this, because I now have one of these things hanging on my wall myself. :D