refactor(frontend): clean up code by consolidating multi-line JSX into single lines where feasible

- Refactored JSX elements to improve readability by collapsing multi-line props and attributes into single lines if their length permits.
- Improved consistency in component imports by grouping and consolidating them.
- No functional changes, purely restructuring for clarity and maintainability.

frontend/tests/components/layout/AppLayout.test.tsx

@@ -145,9 +145,7 @@ describe('AppLayout', () => {
     });
 
     it('passes custom breadcrumbs to AppBreadcrumbs', () => {
-      const customBreadcrumbs = [
-        { label: 'Custom', href: '/custom', current: true },
-      ];
+      const customBreadcrumbs = [{ label: 'Custom', href: '/custom', current: true }];
 
       render(
         <AppLayout breadcrumbs={customBreadcrumbs}>
@@ -344,10 +342,7 @@ describe('PageHeader', () => {
 
     it('renders actions when provided', () => {
       render(
-        <PageHeader
-          title="Title"
-          actions={<button data-testid="action-button">Action</button>}
-        />
+        <PageHeader title="Title" actions={<button data-testid="action-button">Action</button>} />
       );
 
       expect(screen.getByTestId('action-button')).toBeInTheDocument();