fix: heatmap popover blink (#195)

web/src/components/UsageHeatMap.tsx

@@ -99,19 +99,25 @@ const UsageHeatMap = () => {
               : "stat-day-L4-bg";
 
           return (
-            <span
+            <div
-              className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
+              className="stat-wrapper"
-                todayTimeStamp === v.timestamp ? "today" : ""
-              }`}
               key={i}
               onMouseEnter={(e) => handleUsageStatItemMouseEnter(e, v)}
               onMouseLeave={handleUsageStatItemMouseLeave}
               onClick={() => handleUsageStatItemClick(v)}
+            >
+              <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,12 +23,12 @@
     grid-template-columns: repeat(12, 1fr);
     grid-auto-flow: column;
 
+    > .stat-wrapper {
       > .stat-container {
         @apply block rounded-sm;
         width: 14px;
         height: 14px;
         background-color: @bg-lightgray;
-      margin-bottom: 2px;
 
         &.null {
           @apply bg-transparent;
@@ -56,6 +56,7 @@
       }
     }
   }
+}
 
 .usage-detail-container {
   @apply fixed left-0 top-0 ml-2 -mt-9 p-2 z-100 -translate-x-1/2 select-none text-white text-xs rounded whitespace-nowrap;