Refactor useAuth hook, settings components, and docs for formatting and readability improvements

- Consolidated multi-line arguments into single lines where appropriate in `useAuth`.
- Improved spacing and readability in data processing across components (`ProfileSettingsForm`, `PasswordChangeForm`, `SessionCard`).
- Applied consistent table and markdown formatting in design system docs (e.g., `README.md`, `08-ai-guidelines.md`, `00-quick-start.md`).
- Updated code snippets to ensure adherence to Prettier rules and streamlined JSX structures.

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

@@ -9,11 +9,7 @@ describe('ChartCard', () => {
   const mockChildren = <div>Chart Content</div>;
 
   it('renders with title and children', () => {
-    render(
-      <ChartCard title="Test Chart">
-        {mockChildren}
-      </ChartCard>
-    );
+    render(<ChartCard title="Test Chart">{mockChildren}</ChartCard>);
 
     expect(screen.getByText('Test Chart')).toBeInTheDocument();
     expect(screen.getByText('Chart Content')).toBeInTheDocument();
@@ -69,11 +65,7 @@ describe('ChartCard', () => {
   });
 
   it('renders without description when not provided', () => {
-    render(
-      <ChartCard title="Test Chart">
-        {mockChildren}
-      </ChartCard>
-    );
+    render(<ChartCard title="Test Chart">{mockChildren}</ChartCard>);
 
     expect(screen.getByText('Test Chart')).toBeInTheDocument();
     expect(screen.getByText('Chart Content')).toBeInTheDocument();