chore: Add date to archive vs creation tooltip (#10578)

Makes it easier to understand what piece of data you're looking at. The
raw date isn't available directly, but we have the formatted version for
the tooltip, so we'll display that.

This PR changes the format to be more in line with the UX sketches (just
numbers and separators instead of words). In theory, it should also be
possible to [adjust the
locale](https://www.npmjs.com/package/chartjs-adapter-date-fns#locale-support-via-scale-options)
(in this case, it should be to the user's chosen locale), but I can't
seem to make that option work. I don't want to spend more time on that
right now, unless we get feedback on it. However, _yes_ the format is
american, and _yes_, that puts months ahead of days. However, you also
have the date in longer form on the x axis, so I think you'll be able to
work it out.


Before:
<img width="279" height="139" alt="image"
src="https://github.com/user-attachments/assets/5c71e708-9d9f-412a-acbb-7d28e5071d5a"
/>


After: 
<img width="246" height="154" alt="image"
src="https://github.com/user-attachments/assets/13a4f5b3-281b-4003-8aae-a248578fead8"
/>

frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx

@@ -164,7 +164,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                     display: true,
                     time: {
                         unit: 'week' as const,
-                        tooltipFormat: 'PPP',
+                        tooltipFormat: 'P',
                     },
                     grid: {
                         display: false,

frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx

@@ -6,8 +6,10 @@ import type { WeekData } from './types.ts';
 import { calculateRatio } from 'component/insights/calculate-ratio/calculate-ratio.ts';
 
 const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({
-    padding: theme.spacing(2),
-    width: 200,
+    padding: theme.spacing(1.5),
+    display: 'flex',
+    flexFlow: 'column',
+    gap: theme.spacing(0.5),
 }));
 
 const DataList = styled('dl')(({ theme }) => ({
@@ -22,12 +24,13 @@ const DataRow = styled('div', {
     alignItems: 'center',
     whiteSpace: 'nowrap',
     fontSize: theme.typography.body2.fontSize,
-    '::before': {
+    'dt::before': {
         content: '" "',
         display: 'inline-block',
         height: '.65rem',
         aspectRatio: '1/1',
         borderRadius: '50%',
+        marginInlineEnd: theme.spacing(0.5),
 
         backgroundColor:
             dataType === 'archived'
@@ -40,6 +43,11 @@ interface CreationArchiveRatioTooltipProps {
     tooltip: TooltipState | null;
 }
 
+const Timestamp = styled('span')(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.secondary,
+}));
+
 export const CreationArchiveRatioTooltip: FC<
     CreationArchiveRatioTooltipProps
 > = ({ tooltip }) => {
@@ -56,12 +64,7 @@ export const CreationArchiveRatioTooltip: FC<
     return (
         <ChartTooltipContainer tooltip={tooltip}>
             <StyledTooltipItemContainer elevation={3}>
-                <Typography
-                    variant='body2'
-                    component='div'
-                    fontWeight='bold'
-                    sx={{ marginBottom: 1 }}
-                >
+                <Typography variant='body2' component='span' fontWeight='bold'>
                     Ratio {ratio}
                 </Typography>
 
@@ -75,6 +78,7 @@ export const CreationArchiveRatioTooltip: FC<
                         <dd>{createdCount}</dd>
                     </DataRow>
                 </DataList>
+                <Timestamp>{tooltip.title}</Timestamp>
             </StyledTooltipItemContainer>
         </ChartTooltipContainer>
     );