comparison amount text height refactor to avoid amount text clipping comparison bar

src/components/HistoryChart.tsx

@@ -162,7 +162,10 @@ export default function HistoryChart({
         <Box sx={{ display: "flex", alignItems: "flex-end", height: 220, mt: 4 }}>
           {currentData.map((point) => {
             const currentHeight = (point.amount / maxAmount) * 100;
-            const compareHeight = ((point.compareAmount || 0) / maxAmount) * 100;
+            const compareHeight = comparison
+              ? ((point.compareAmount || 0) / maxAmount) * 100
+              : 0;
+            const labelHeight = Math.max(currentHeight, compareHeight);
 
             return (
               <Box
@@ -185,6 +188,22 @@ export default function HistoryChart({
                     position: "relative"
                   }}
                 >
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      position: "absolute",
+                      bottom: `${labelHeight}%`,
+                      left: "50%",
+                      transform: "translate(-50%, -6px)",
+                      fontSize: "0.65rem",
+                      whiteSpace: "nowrap",
+                      pointerEvents: "none"
+                    }}
+                  >
+                    {formatDisplay(point, activeTab.toLowerCase(), comparison)}
+                  </Typography>
+
+                  {/* Compare */}
                   {comparison && (
                     <Box
                       sx={{
@@ -196,29 +215,18 @@ export default function HistoryChart({
                     />
                   )}
 
+                  {/* Spacer */}
+                  <Box sx={{ width: 4 }} />
+
+                  {/* Current */}
                   <Box
                     sx={{
                       width: 10,
                       height: `${currentHeight}%`,
                       bgcolor: point.highlighted ? "error.main" : "primary.main",
-                      borderRadius: 2,
+                      borderRadius: 2
-                      position: "relative"
                     }}
-                  >
+                  />
-                    <Typography
-                      variant="caption"
-                      sx={{
-                        position: "absolute",
-                        top: -18,
-                        left: "50%",
-                        transform: "translateX(-50%)",
-                        fontSize: "0.65rem",
-                        whiteSpace: "nowrap"
-                      }}
-                    >
-                      {formatDisplay(point, activeTab.toLowerCase(), comparison)}
-                    </Typography>
-                  </Box>
                 </Box>
 
                 <Box