Repository: louislam/uptime-kuma
File: src/components/HeartbeatBar.vue (Vue)

Code before:

                // Check if tooltip would go off-screen and adjust position
                const tooltipHeight = 80; // Approximate tooltip height
                const viewportHeight = window.innerHeight;
                const spaceAbove = y;
                const spaceBelow = viewportHeight - y - rect.height;

                if (spaceAbove > tooltipHeight && spaceBelow < tooltipHeight) {
                    // Show above - arrow points down
                    this.tooltipPosition = "above";
                    this.tooltipY = y - 10;
                } else {
                    // Show below - arrow points up
                    this.tooltipPosition = "below";
                    this.tooltipY = y + rect.height + 10;
                }

                // Ensure tooltip doesn't go off the left or right edge
                const tooltipWidth = 120; // Approximate tooltip width
                let adjustedX = x;

                if (x - tooltipWidth / 2 < 10) {
                    adjustedX = tooltipWidth / 2 + 10;
                } else if (x + tooltipWidth / 2 > window.innerWidth - 10) {
                    adjustedX = window.innerWidth - tooltipWidth / 2 - 10;
                }

                this.tooltipX = adjustedX;
                this.tooltipVisible = true;
            }, 150);
        },

        /**
         * Hide custom tooltip
         * @returns {void}
         */
        hideTooltip() {
            if (this.tooltipTimeoutId) {
                clearTimeout(this.tooltipTimeoutId);
                this.tooltipTimeoutId = null;
            }

            this.tooltipVisible = false;
            this.tooltipContent = null;
        },

    },
};
</script>

<style lang="scss" scoped>

Review comment (suggestion):
Where operator precedence might matter, I would like to see brackets.
Feel free to disregard

```suggestion
                if ((x - tooltipWidth / 2) < 10) {
                    adjustedX = tooltipWidth / 2 + 10;
                } else if ((x + tooltipWidth / 2) > (window.innerWidth - 10)) {
                    adjustedX = window.innerWidth - tooltipWidth / 2 - 10;
                }
```

Code after:
                const y = rect.top;

                // Check if tooltip would go off-screen and adjust position
                const tooltipHeight = 80; // Approximate tooltip height
                const viewportHeight = window.innerHeight;
                const spaceAbove = y;
                const spaceBelow = viewportHeight - y - rect.height;

                if (spaceAbove > tooltipHeight && spaceBelow < tooltipHeight) {
                    // Show above - arrow points down
                    this.tooltipPosition = "above";
                    this.tooltipY = y - 10;
                } else {
                    // Show below - arrow points up
                    this.tooltipPosition = "below";
                    this.tooltipY = y + rect.height + 10;
                }

                // Ensure tooltip doesn't go off the left or right edge
                const tooltipWidth = 120; // Approximate tooltip width
                let adjustedX = x;

                if ((x - tooltipWidth / 2) < 10) {
                    adjustedX = tooltipWidth / 2 + 10;
                } else if ((x + tooltipWidth / 2) > (window.innerWidth - 10)) {
                    adjustedX = window.innerWidth - tooltipWidth / 2 - 10;
                }

                this.tooltipX = adjustedX;
                this.tooltipVisible = true;
            }, 150);
        },

        /**
         * Hide custom tooltip
         * @returns {void}
         */
        hideTooltip() {
            if (this.tooltipTimeoutId) {
                clearTimeout(this.tooltipTimeoutId);
                this.tooltipTimeoutId = null;
            }

            this.tooltipVisible = false;
            this.tooltipContent = null;
        },

    },
};
</script>