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/wizard/steps/ClientModeStep.test.tsx

@@ -59,7 +59,9 @@ describe('ClientModeStep', () => {
 
     it('has accessible radiogroup role', () => {
       render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
-      expect(screen.getByRole('radiogroup', { name: /client interaction mode options/i })).toBeInTheDocument();
+      expect(
+        screen.getByRole('radiogroup', { name: /client interaction mode options/i })
+      ).toBeInTheDocument();
     });
   });
 
@@ -76,7 +78,9 @@ describe('ClientModeStep', () => {
       const user = userEvent.setup();
       render(<ClientModeStep state={defaultState} updateState={mockUpdateState} />);
 
-      const technicalOption = screen.getByRole('button', { name: /technical mode.*detailed technical/i });
+      const technicalOption = screen.getByRole('button', {
+        name: /technical mode.*detailed technical/i,
+      });
       await user.click(technicalOption);
 
       expect(mockUpdateState).toHaveBeenCalledWith({ clientMode: 'technical' });
@@ -123,7 +127,7 @@ describe('ClientModeStep', () => {
 
       clientModeOptions.forEach((option) => {
         const button = screen.getByRole('button', {
-          name: new RegExp(`${option.label}.*${option.description}`, 'i')
+          name: new RegExp(`${option.label}.*${option.description}`, 'i'),
         });
         expect(button).toBeInTheDocument();
       });
@@ -168,7 +172,9 @@ describe('ClientModeStep', () => {
       };
       render(<ClientModeStep state={stateWithTechnical} updateState={mockUpdateState} />);
 
-      const technicalOption = screen.getByRole('button', { name: /technical mode.*detailed technical/i });
+      const technicalOption = screen.getByRole('button', {
+        name: /technical mode.*detailed technical/i,
+      });
       await user.click(technicalOption);
 
       // Should still call updateState