fix: heatmap popover blink (#195)

web/src/components/UsageHeatMap.tsx

@@ -99,19 +99,25 @@ const UsageHeatMap = () => {
               : "stat-day-L4-bg";
 
           return (
-            <span
-              className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
-                todayTimeStamp === v.timestamp ? "today" : ""
-              }`}
+            <div
+              className="stat-wrapper"
               key={i}
               onMouseEnter={(e) => handleUsageStatItemMouseEnter(e, v)}
               onMouseLeave={handleUsageStatItemMouseLeave}
               onClick={() => handleUsageStatItemClick(v)}
-            ></span>
+            >
+              <span
+                className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
+                  todayTimeStamp === v.timestamp ? "today" : ""
+                }`}
+              ></span>
+            </div>
           );
         })}
         {nullCell.map((_, i) => (
-          <span className="stat-container null" key={i}></span>
+          <div className="stat-wrapper" key={i}>
+            <span className="stat-container null"></span>
+          </div>
         ))}
       </div>
     </div>

web/src/less/usage-heat-map.less

@@ -23,35 +23,36 @@
     grid-template-columns: repeat(12, 1fr);
     grid-auto-flow: column;
 
-    > .stat-container {
-      @apply block rounded-sm;
-      width: 14px;
-      height: 14px;
-      background-color: @bg-lightgray;
-      margin-bottom: 2px;
+    > .stat-wrapper {
+      > .stat-container {
+        @apply block rounded-sm;
+        width: 14px;
+        height: 14px;
+        background-color: @bg-lightgray;
 
-      &.null {
-        @apply bg-transparent;
-      }
+        &.null {
+          @apply bg-transparent;
+        }
 
-      &.stat-day-L1-bg {
-        background-color: @stat-day-L1-bg !important;
-      }
+        &.stat-day-L1-bg {
+          background-color: @stat-day-L1-bg !important;
+        }
 
-      &.stat-day-L2-bg {
-        background-color: @stat-day-L2-bg !important;
-      }
+        &.stat-day-L2-bg {
+          background-color: @stat-day-L2-bg !important;
+        }
 
-      &.stat-day-L3-bg {
-        background-color: @stat-day-L3-bg !important;
-      }
+        &.stat-day-L3-bg {
+          background-color: @stat-day-L3-bg !important;
+        }
 
-      &.stat-day-L4-bg {
-        background-color: @stat-day-L4-bg !important;
-      }
+        &.stat-day-L4-bg {
+          background-color: @stat-day-L4-bg !important;
+        }
 
-      &.today {
-        border: 1px solid black;
+        &.today {
+          border: 1px solid black;
+        }
       }
     }
   }