From 4580cb61791f2ed00295b1cafa60bced852b1d05 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Tue, 8 Sep 2026 09:46:51 -0700
Subject: [PATCH] preserve tooltip css

---
 .../charts/ChartAnnotationMarkers.module.css  |  9 ++--
 .../charts/ChartAnnotationMarkers.tsx         | 44 +++++++++++--------
 src/components/charts/ChartTooltip.tsx        | 18 ++++++--
 3 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/src/components/charts/ChartAnnotationMarkers.module.css b/src/components/charts/ChartAnnotationMarkers.module.css
index d9b2c3749..1edc59774 100644
--- a/src/components/charts/ChartAnnotationMarkers.module.css
+++ b/src/components/charts/ChartAnnotationMarkers.module.css
@@ -37,21 +37,22 @@
 
 .note {
   max-width: 300px;
-  max-height: min(280px, 50vh);
-  overflow-y: auto;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
 .noteFull {
-  display: block;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
 }
 
 .noteText {
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 2;
 }
 
 .moreButton {
diff --git a/src/components/charts/ChartAnnotationMarkers.tsx b/src/components/charts/ChartAnnotationMarkers.tsx
index 0393c49fb..828e4b4e8 100644
--- a/src/components/charts/ChartAnnotationMarkers.tsx
+++ b/src/components/charts/ChartAnnotationMarkers.tsx
@@ -1,11 +1,11 @@
+import { Button, Column, Text, Tooltip, TooltipTrigger, useTheme } from '@umami/react-zen';
+import { isSameDay } from 'date-fns';
+import { useMemo } from 'react';
 import { IconLabel } from '@/components/common/IconLabel';
 import { useLocale, useMessages } from '@/components/hooks';
 import { Maximize } from '@/components/icons';
 import { getThemeColors } from '@/lib/colors';
 import { formatDate } from '@/lib/date';
-import { Button, Column, Text, Tooltip, TooltipTrigger, useTheme } from '@umami/react-zen';
-import { isSameDay } from 'date-fns';
-import { useMemo } from 'react';
 import styles from './ChartAnnotationMarkers.module.css';
 
 const MAX_TOOLTIP_ANNOTATIONS = 3;
@@ -78,35 +78,41 @@ export function ChartAnnotationMarkers({
                 padding="1"
                 borderRadius="md"
                 className={styles.note}
-                style={{ backgroundColor: 'rgba(0,0,0,0.2)', color: 'white' }}
+                style={{
+                  backgroundColor: 'rgba(0,0,0,0.8)',
+                  borderRadius: '5.25px',
+                  color: 'white',
+                  gap: '8px',
+                  padding: '12px',
+                }}
               >
                 {visibleAnnotations.map(annotation => (
                   <Column key={annotation.id} gap="1">
-                    <Text size="sm" weight="bold">
+                    <Text
+                      size="sm"
+                      weight="bold"
+                      style={{ fontSize: '12.25px', lineHeight: '17.5px' }}
+                    >
                       {formatAnnotationDate(annotation, locale)}
                     </Text>
                     <Text
                       size="sm"
                       className={annotations.length === 1 ? styles.noteFull : styles.noteText}
+                      style={{ fontSize: '12.25px', lineHeight: '17.5px' }}
                     >
                       {annotation.label}
                     </Text>
                   </Column>
                 ))}
-                {annotations.length > 1 &&
-                  (onMoreClick ? (
-                    <Button
-                      variant="quiet"
-                      className={styles.moreButton}
-                      onPress={() => onMoreClick(annotations)}
-                    >
-                      <IconLabel icon={<Maximize />}>{t(labels.view)}</IconLabel>
-                    </Button>
-                  ) : (
-                    <IconLabel icon={<Maximize />} style={{ opacity: 0.8 }}>
-                      {t(labels.view)}
-                    </IconLabel>
-                  ))}
+                {onMoreClick && (
+                  <Button
+                    variant="quiet"
+                    className={styles.moreButton}
+                    onPress={() => onMoreClick(annotations)}
+                  >
+                    <IconLabel icon={<Maximize />}>{t(labels.view)}</IconLabel>
+                  </Button>
+                )}
               </Column>
             </Tooltip>
           </TooltipTrigger>
diff --git a/src/components/charts/ChartTooltip.tsx b/src/components/charts/ChartTooltip.tsx
index 4389584ca..d8abc3c13 100644
--- a/src/components/charts/ChartTooltip.tsx
+++ b/src/components/charts/ChartTooltip.tsx
@@ -16,12 +16,24 @@ export function ChartTooltip({
         gap="3"
         padding="4"
         borderRadius="md"
-        style={{ backgroundColor: 'rgba(0,0,0,0.8)', color: 'white' }}
+        style={{
+          backgroundColor: 'rgba(0,0,0,0.8)',
+          borderRadius: '5.25px',
+          color: 'white',
+          gap: '10.5px',
+          padding: '14px',
+        }}
       >
-        {title && <Text size="sm">{title}</Text>}
+        {title && (
+          <Text size="sm" style={{ fontSize: '12.25px', lineHeight: '17.5px' }}>
+            {title}
+          </Text>
+        )}
         <Row alignItems="center">
           <StatusLight color={color}>
-            <Text size="sm">{value}</Text>
+            <Text size="sm" style={{ fontSize: '12.25px', lineHeight: '17.5px' }}>
+              {value}
+            </Text>
           </StatusLight>
         </Row>
       </Column>