fix: heatmap overflow

src/components/dialogs/UserDialog/UserDialogActivityTab.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-col" style="min-height: 200px">
+    <div class="flex min-w-0 flex-col overflow-x-hidden" style="min-height: 200px">
         <div style="display: flex; align-items: center; justify-content: space-between">
             <div style="display: flex; align-items: center">
                 <Button
@@ -62,6 +62,7 @@
         <div
             v-show="filteredEventCount > 0"
             ref="activityChartRef"
+            class="min-w-0 overflow-hidden"
             style="width: 100%; height: 240px"
             @contextmenu.prevent="onChartRightClick" />
 
@@ -125,6 +126,7 @@
             <div
                 v-show="hasOverlapData"
                 ref="overlapChartRef"
+                class="min-w-0 overflow-hidden"
                 style="width: 100%; height: 240px"
                 @contextmenu.prevent="onOverlapChartRightClick" />
 

src/components/dialogs/UserDialog/activity/buildHeatmapOption.js

@@ -11,6 +11,7 @@ export function buildHeatmapOption({
 }) {
     return {
         tooltip: {
+            confine: true,
             position: 'top',
             formatter: (params) => {
                 const [hour, dayIndex] = params.data;
@@ -68,8 +69,9 @@ export function buildHeatmapOption({
                 data,
                 emphasis: {
                     itemStyle: {
-                        shadowBlur: 6,
+                        borderColor: isDarkMode ? 'hsl(220, 15%, 18%)' : 'hsl(210, 18%, 78%)',
-                        shadowColor: 'rgba(0, 0, 0, 0.3)'
+                        borderWidth: 1.5,
+                        opacity: 0.92
                     }
                 },
                 itemStyle: {