diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index b07a692667..d7eaed403b 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -68,12 +68,16 @@ export default {
   />
 </template>
 <style>
-/* A quick patch for vue3-calendar-heatmap's tooltip padding.
+/* A quick patch for vue3-calendar-heatmap's tooltip padding, to avoid conflicting with other tippy contents.
 At the moment we could only identify the tooltip by its transition property.
 https://github.com/razorness/vue3-calendar-heatmap/blob/955626176cb5dc3d3ead8120475c2e5e753cc392/src/components/CalendarHeatmap.vue#L202
+This selector should be replaced by a more specific one if the library adds a CSS class.
 */
 [data-tippy-root][style*="transition: transform 0.1s ease-out"] .tippy-box .tippy-content {
   transition: none !important;
-  padding: 0.5em;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-tooltip-bg);
+  color: var(--color-tooltip-text);
+  border: none;
 }
 </style>