What an interesting problem we have here.
The class is dynamically set based on the result of the isDescriptionTaller(index) function:
<div
:class="{ '!h-auto': isDescriptionTaller(index) }"
:id="`image-event-${index}`"
>
This function compares the height of a div with the height of another column, and if the second column is taller, it stretches the column by adding a specific class to it.
The issue arises when the class is active because both columns end up having the same height, causing the condition in isDescriptionTaller(index) to evaluate as false. As a result, the class is removed, making the second column taller again, triggering the class to be added once more. This cycle continues endlessly.
To resolve this, you can modify the condition in isDescriptionTaller(index) to check for greater or equal height instead:
const isDescriptionTaller = (index) => {
...
return description?.clientHeight >= image?.clientHeight ?? false;
};
With this change, the class remains even when the columns share the same height.
You may want to reconsider whether removing the class is necessary at all. If the image is taller, leaving the class should not cause any issues.
If you prefer applying the class only when the image is shorter than the text, consider checking the naturalHeight of the image instead of its client height:
const isDescriptionTaller = (index) => {
const description = document.querySelector(`#description-event-${index}`);
const image = document.querySelector(`#image-event-${index} img`); // <--- target the image
return description?.clientHeight >= image?.naturalHeight ?? false; // <--- use image height
};
Remember that until the image source is loaded, its dimensions will be 0. If you are using the same image on both slides, you may encounter this issue only the first time the app loads. Consider utilizing the onload event or finding a CSS workaround that doesn't rely heavily on JavaScript calculations. It's a separate challenge altogether.