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/events/ConnectionStatus.test.tsx

@@ -182,9 +182,7 @@ describe('ConnectionStatus', () => {
 
   describe('className prop', () => {
     it('applies custom className', () => {
-      const { container } = render(
-        <ConnectionStatus state="connected" className="custom-class" />
-      );
+      const { container } = render(<ConnectionStatus state="connected" className="custom-class" />);
 
       expect(container.querySelector('.custom-class')).toBeInTheDocument();
     });