fix: move bar chart inside day modal instead of below calendar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/tests/ExperimentCalendar.test.jsx

@@ -200,7 +200,7 @@ describe('day click modal', () => {
     fireEvent.click(screen.getByTestId(`day-${dateStr}`));
     await waitFor(() => {
       const dialog = screen.getByRole('dialog');
-      expect(within(dialog).getByText('Rat A')).toBeInTheDocument();
+      expect(within(dialog).getAllByText('Rat A').length).toBeGreaterThan(0);
     });
   });
 
@@ -238,16 +238,16 @@ describe('day click modal', () => {
     fireEvent.click(screen.getByTestId(`day-${dateStr}`));
     await waitFor(() => {
       const dialog = screen.getByRole('dialog');
-      expect(within(dialog).getByText('Rat A')).toBeInTheDocument();
-      expect(within(dialog).getByText('Rat B')).toBeInTheDocument(); // shown even without data
+      expect(within(dialog).getAllByText('Rat A').length).toBeGreaterThan(0);
+      expect(within(dialog).getAllByText('Rat B').length).toBeGreaterThan(0);
     });
   });
 });
 
-// ── Bar chart ─────────────────────────────────────────────────────────────────
+// ── Bar chart (inside day modal) ──────────────────────────────────────────────
 
-describe('bar chart', () => {
-  it('renders bar chart when animals have statuses', () => {
+describe('bar chart inside day modal', () => {
+  it('renders bar chart inside modal when animals have statuses', async () => {
     const dateStr = todayStr();
     const statuses = [
       makeStatus('a1000000-0000-0000-0000-000000000001', dateStr, { 'ww000000-0000-0000-0000-000000000099': '325' }),
@@ -255,10 +255,25 @@ describe('bar chart', () => {
     render(
       <ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={statuses} animals={ANIMALS} />,
     );
-    expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId(`day-${dateStr}`));
+    await waitFor(() => {
+      const dialog = screen.getByRole('dialog');
+      expect(within(dialog).getByTestId('bar-chart')).toBeInTheDocument();
+    });
   });
 
-  it('does not render bar chart when no animals have statuses', () => {
+  it('does not render bar chart in modal when no animals have overall statuses', async () => {
+    const dateStr = todayStr();
+    // Give Rat A a status today so the day is clickable, but use a different animal not in barData
+    const statuses = [
+      makeStatus('a1000000-0000-0000-0000-000000000001', dateStr, { 'ww000000-0000-0000-0000-000000000099': '325' }),
+    ];
+    // Use animals list with no matching statuses for barData by filtering to empty
+    render(
+      <ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={statuses} animals={[]} />,
+    );
+    // No days enabled since animals=[] means no bar chart, but day is also not enabled
+    // Just verify no bar chart on empty statuses/animals
     render(
       <ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={[]} animals={ANIMALS} />,
     );