Revert #1208, due to the break animation

src/assets/app.scss

@@ -367,7 +367,7 @@ textarea.form-control {
     .item {
         display: block;
         text-decoration: none;
-        padding: 15px;
+        padding: 13px 15px 10px 15px;
         border-radius: 10px;
         transition: all ease-in-out 0.15s;
 

src/components/HeartbeatBar.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="wrap" class="wrap" :style="wrapStyle">
-        <div class="hp-bar-big d-flex" :style="barStyle">
+        <div class="hp-bar-big" :style="barStyle">
             <div
                 v-for="(beat, index) in shortBeatList"
                 :key="index"
@@ -8,11 +8,7 @@
                 :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }"
                 :style="beatStyle"
                 :title="getBeatTitle(beat)"
-                @mouseenter="toggleActivateSibling"
+            />
-                @mouseleave="toggleActivateSibling"
-            >
-                <div class="beat-inner" />
-            </div>
         </div>
     </div>
 </template>
@@ -174,28 +170,6 @@ export default {
             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>
@@ -211,10 +185,9 @@ export default {
 
 .hp-bar-big {
     .beat {
+        display: inline-block;
         background-color: $primary;
         border-radius: $border-radius;
-        display: inline-block;
-        transition: all ease 0.6s;
 
         &.empty {
             background-color: aliceblue;
@@ -228,23 +201,11 @@ export default {
             background-color: $warning;
         }
 
-        .beat-inner {
-            border-radius: $border-radius;
-            display: inline-block;
-            height: 100%;
-            width: 5px;
-        }
-
         &:not(.empty):hover {
-            transition: all ease 0.15s;
+            transition: all ease-in-out 0.15s;
             opacity: 0.8;
             transform: scale(var(--hover-scale));
         }
-
-        &.active-sibling {
-            transform: scale(1.15);
-            transition: all ease 0.15s;
-        }
     }
 }
 

src/components/PublicGroupList.vue

@@ -33,19 +33,19 @@
                         <template #item="monitor">
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-9 col-md-8 small-padding d-flex align-items-center flex-wrap">
+                                    <div class="col-9 col-md-8 small-padding">
-                                        <div class="info d-flex align-items-center gap-3 w-100">
+                                        <div class="info">
                                             <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
                                             <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
 
                                             <Uptime :monitor="monitor.element" type="24" :pill="true" />
                                             {{ monitor.element.name }}
                                         </div>
-                                        <div v-if="showTags && monitor.element.tags.length > 0" class="tags">
+                                        <div v-if="showTag" class="tags">
                                             <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
                                         </div>
                                     </div>
-                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4 d-flex align-items-center">
+                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
                                         <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
                                     </div>
                                 </div>