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/src/components/common/ErrorBoundary.tsx

@@ -12,13 +12,7 @@
 import { Component, type ReactNode } from 'react';
 import { AlertTriangle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 
 // ============================================================================
 // Types
@@ -59,25 +53,17 @@ function DefaultFallback({ error, onReset, showReset }: DefaultFallbackProps) {
           Something went wrong
         </CardTitle>
         <CardDescription>
-          An unexpected error occurred. Please try again or contact support if
-          the problem persists.
+          An unexpected error occurred. Please try again or contact support if the problem persists.
         </CardDescription>
       </CardHeader>
       <CardContent>
         {error && (
           <div className="mb-4 rounded-md bg-muted p-3">
-            <p className="font-mono text-sm text-muted-foreground">
-              {error.message}
-            </p>
+            <p className="font-mono text-sm text-muted-foreground">{error.message}</p>
           </div>
         )}
         {showReset && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onReset}
-            className="gap-2"
-          >
+          <Button variant="outline" size="sm" onClick={onReset} className="gap-2">
             <RefreshCw className="h-4 w-4" aria-hidden="true" />
             Try again
           </Button>
@@ -108,10 +94,7 @@ function DefaultFallback({ error, onReset, showReset }: DefaultFallbackProps) {
  * </ErrorBoundary>
  * ```
  */
-export class ErrorBoundary extends Component<
-  ErrorBoundaryProps,
-  ErrorBoundaryState
-> {
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -142,13 +125,7 @@ export class ErrorBoundary extends Component<
         return fallback;
       }
 
-      return (
-        <DefaultFallback
-          error={error}
-          onReset={this.handleReset}
-          showReset={showReset}
-        />
-      );
+      return <DefaultFallback error={error} onReset={this.handleReset} showReset={showReset} />;
     }
 
     return children;