Refactor tests, documentation, and component code for consistent formatting and improved readability

- Reformatted test files (`RegistrationActivityChart.test.tsx`, `DemoCredentialsModal.test.tsx`) for indentation consistency.
- Reduced inline style verbosity across components and docs (`DemoModeBanner`, `CodeBlock`, `MarkdownContent`).
- Enhanced Markdown documentation (`sync-msw-with-openapi.md`, `MSW_AUTO_GENERATION.md`) with spacing updates for improved clarity.
- Updated MSW configuration to simplify locale route handling in `browser.ts`.

frontend/tests/components/charts/RegistrationActivityChart.test.tsx

@@ -8,80 +8,80 @@ import type { RegistrationActivityData } from '@/components/charts/RegistrationA
 
 // Mock recharts to avoid rendering issues in tests
 jest.mock('recharts', () => {
-    const OriginalModule = jest.requireActual('recharts');
-    return {
-        ...OriginalModule,
-        ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
-            <div data-testid="responsive-container">{children}</div>
-        ),
-    };
+  const OriginalModule = jest.requireActual('recharts');
+  return {
+    ...OriginalModule,
+    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid="responsive-container">{children}</div>
+    ),
+  };
 });
 
 describe('RegistrationActivityChart', () => {
-    const mockData: RegistrationActivityData[] = [
-        { date: 'Jan 1', registrations: 5 },
-        { date: 'Jan 2', registrations: 8 },
-        { date: 'Jan 3', registrations: 3 },
+  const mockData: RegistrationActivityData[] = [
+    { date: 'Jan 1', registrations: 5 },
+    { date: 'Jan 2', registrations: 8 },
+    { date: 'Jan 3', registrations: 3 },
+  ];
+
+  it('renders chart card with title and description', () => {
+    render(<RegistrationActivityChart data={mockData} />);
+
+    expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
+    expect(screen.getByText('New user registrations over the last 14 days')).toBeInTheDocument();
+  });
+
+  it('renders chart with provided data', () => {
+    render(<RegistrationActivityChart data={mockData} />);
+
+    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no data is provided', () => {
+    render(<RegistrationActivityChart />);
+
+    expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
+    expect(screen.getByText('No registration data available')).toBeInTheDocument();
+    expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
+  });
+
+  it('shows empty state when data array is empty', () => {
+    render(<RegistrationActivityChart data={[]} />);
+
+    expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
+    expect(screen.getByText('No registration data available')).toBeInTheDocument();
+    expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
+  });
+
+  it('shows empty state when data has no registrations', () => {
+    const emptyData = [
+      { date: 'Jan 1', registrations: 0 },
+      { date: 'Jan 2', registrations: 0 },
     ];
+    render(<RegistrationActivityChart data={emptyData} />);
 
-    it('renders chart card with title and description', () => {
-        render(<RegistrationActivityChart data={mockData} />);
+    expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
+    expect(screen.getByText('No registration data available')).toBeInTheDocument();
+    expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
+  });
 
-        expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
-        expect(screen.getByText('New user registrations over the last 14 days')).toBeInTheDocument();
-    });
+  it('shows loading state', () => {
+    render(<RegistrationActivityChart data={mockData} loading />);
 
-    it('renders chart with provided data', () => {
-        render(<RegistrationActivityChart data={mockData} />);
+    expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
 
-        expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
-    });
+    // Chart should not be visible when loading
+    expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
+    expect(screen.queryByText('No registration data available')).not.toBeInTheDocument();
+  });
 
-    it('shows empty state when no data is provided', () => {
-        render(<RegistrationActivityChart />);
+  it('shows error state', () => {
+    render(<RegistrationActivityChart data={mockData} error="Failed to load chart data" />);
 
-        expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
-        expect(screen.getByText('No registration data available')).toBeInTheDocument();
-        expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
-    });
+    expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
+    expect(screen.getByText('Failed to load chart data')).toBeInTheDocument();
 
-    it('shows empty state when data array is empty', () => {
-        render(<RegistrationActivityChart data={[]} />);
-
-        expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
-        expect(screen.getByText('No registration data available')).toBeInTheDocument();
-        expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
-    });
-
-    it('shows empty state when data has no registrations', () => {
-        const emptyData = [
-            { date: 'Jan 1', registrations: 0 },
-            { date: 'Jan 2', registrations: 0 },
-        ];
-        render(<RegistrationActivityChart data={emptyData} />);
-
-        expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
-        expect(screen.getByText('No registration data available')).toBeInTheDocument();
-        expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
-    });
-
-    it('shows loading state', () => {
-        render(<RegistrationActivityChart data={mockData} loading />);
-
-        expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
-
-        // Chart should not be visible when loading
-        expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
-        expect(screen.queryByText('No registration data available')).not.toBeInTheDocument();
-    });
-
-    it('shows error state', () => {
-        render(<RegistrationActivityChart data={mockData} error="Failed to load chart data" />);
-
-        expect(screen.getByText('User Registration Activity')).toBeInTheDocument();
-        expect(screen.getByText('Failed to load chart data')).toBeInTheDocument();
-
-        // Chart should not be visible when error
-        expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
-    });
+    // Chart should not be visible when error
+    expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
+  });
 });

frontend/tests/components/home/DemoCredentialsModal.test.tsx

@@ -86,7 +86,9 @@ describe('DemoCredentialsModal', () => {
     fireEvent.click(adminCopyButton!);
 
     await waitFor(() => {
-      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('admin@example.com\nAdminPass1234!');
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        'admin@example.com\nAdminPass1234!'
+      );
       const copiedButtons = screen.getAllByRole('button');
       const copiedButton = copiedButtons.find((btn) => btn.textContent?.includes('Copied!'));
       expect(copiedButton).toBeInTheDocument();