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/layout/AppLayout.tsx

@@ -73,11 +73,7 @@ export function AppLayout({
           {!hideBreadcrumbs && <AppBreadcrumbs items={breadcrumbs} />}
 
           {/* Main content */}
-          <main
-            className={cn('flex-1', className)}
-            id="main-content"
-            tabIndex={-1}
-          >
+          <main className={cn('flex-1', className)} id="main-content" tabIndex={-1}>
             {children}
           </main>
         </div>
@@ -110,11 +106,7 @@ const maxWidthClasses: Record<string, string> = {
   full: 'max-w-full',
 };
 
-export function PageContainer({
-  children,
-  maxWidth = '6xl',
-  className,
-}: PageContainerProps) {
+export function PageContainer({ children, maxWidth = '6xl', className }: PageContainerProps) {
   return (
     <div
       className={cn(
@@ -144,12 +136,7 @@ interface PageHeaderProps {
   className?: string;
 }
 
-export function PageHeader({
-  title,
-  description,
-  actions,
-  className,
-}: PageHeaderProps) {
+export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
   return (
     <div
       className={cn(
@@ -160,9 +147,7 @@ export function PageHeader({
     >
       <div className="space-y-1">
         <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">{title}</h1>
-        {description && (
-          <p className="text-muted-foreground">{description}</p>
-        )}
+        {description && <p className="text-muted-foreground">{description}</p>}
       </div>
       {actions && <div className="flex items-center gap-2">{actions}</div>}
     </div>