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/projects/StatusBadge.test.tsx

@@ -23,9 +23,7 @@ describe('ProjectStatusBadge', () => {
   });
 
   it('applies custom className', () => {
-    const { container } = render(
-      <ProjectStatusBadge status="active" className="custom-class" />
-    );
+    const { container } = render(<ProjectStatusBadge status="active" className="custom-class" />);
     expect(container.firstChild).toHaveClass('custom-class');
   });
 });
@@ -54,9 +52,7 @@ describe('AutonomyBadge', () => {
   });
 
   it('applies custom className', () => {
-    const { container } = render(
-      <AutonomyBadge level="milestone" className="custom-class" />
-    );
+    const { container } = render(<AutonomyBadge level="milestone" className="custom-class" />);
     expect(container.firstChild).toHaveClass('custom-class');
   });
 });