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

Code before:
        resize() {
            if (this.$refs.wrap) {
                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
            }
        },

        getBeatTitle(beat) {
            return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : ``);
        },
        // Toggling the activeSibling class on hover over the current hover item
        toggleActivateSibling(e) {
            // Variable definition
            const element = e.target;
            const previous = element.previousSibling;
            const next = element.nextSibling;

            // Return if the hovered element has empty class
            if (element.classList.contains("empty")) {
                return;
            }

            // Check if Previous Sibling is heartbar element and doesn't have the empty class
            if (previous.children && !previous.classList.contains("empty")) {
                previous.classList.toggle("active-sibling");
            }
            // Check if Next Sibling is heartbar element and doesn't have the empty class
            if (next.children && !next.classList.contains("empty")) {
                next.classList.toggle("active-sibling");
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/vars.scss";

.wrap {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.hp-bar-big {
    .beat {
        background-color: $primary;
        border-radius: $border-radius;
        display: inline-block;
        transition: all ease 0.6s;

        &.empty {

Review comment (suggestion):
```suggestion
            }

            // Check if Next Sibling is heartbar element and doesn't have the empty class
```

Code after:
        resize() {
            if (this.$refs.wrap) {
                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
            }
        },

        getBeatTitle(beat) {
            return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : "");
        },

        // Toggling the activeSibling class on hover over the current hover item
        toggleActivateSibling(e) {
            // Variable definition
            const element = e.target;
            const previous = element.previousSibling;
            const next = element.nextSibling;

            // Return if the hovered element has empty class
            if (element.classList.contains("empty")) {
                return;
            }

            // Check if Previous Sibling is heartbar element and doesn't have the empty class
            if (previous.children && !previous.classList.contains("empty")) {
                previous.classList.toggle("active-sibling");
            }

            // Check if Next Sibling is heartbar element and doesn't have the empty class
            if (next.children && !next.classList.contains("empty")) {
                next.classList.toggle("active-sibling");
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/vars.scss";

.wrap {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.hp-bar-big {
    .beat {
        background-color: $primary;
        border-radius: $border-radius;
        display: inline-block;
        transition: all ease 0.6s;