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/e2e/activity-feed.spec.ts

@@ -103,9 +103,11 @@ test.describe('Activity Feed Page', () => {
 
   test('approval actions are visible for pending approvals', async ({ page }) => {
     // Find approval event
-    const approvalEvent = page.locator('[data-testid^="event-item-"]', {
-      has: page.getByText('Action Required'),
-    }).first();
+    const approvalEvent = page
+      .locator('[data-testid^="event-item-"]', {
+        has: page.getByText('Action Required'),
+      })
+      .first();
 
     // Approval buttons should be visible
     await expect(approvalEvent.getByTestId('approve-button')).toBeVisible();

frontend/e2e/homepage.spec.ts

@@ -120,7 +120,10 @@ test.describe('Homepage - Hero Section', () => {
   test('should navigate to GitHub when clicking View on GitHub', async ({ page }) => {
     const githubLink = page.getByRole('link', { name: /View on GitHub/i }).first();
     await expect(githubLink).toBeVisible();
-    await expect(githubLink).toHaveAttribute('href', expect.stringContaining('gitea.pragmazest.com'));
+    await expect(githubLink).toHaveAttribute(
+      'href',
+      expect.stringContaining('gitea.pragmazest.com')
+    );
   });
 
   test('should navigate to components when clicking Explore Components', async ({ page }) => {

frontend/e2e/project-dashboard.spec.ts

@@ -33,7 +33,9 @@ test.describe('Project Dashboard Page', () => {
     await expect(page.getByTestId('project-header')).toBeVisible();
 
     // Check project name
-    await expect(page.getByRole('heading', { level: 1 })).toContainText('E-Commerce Platform Redesign');
+    await expect(page.getByRole('heading', { level: 1 })).toContainText(
+      'E-Commerce Platform Redesign'
+    );
 
     // Check status badges
     await expect(page.getByText('In Progress')).toBeVisible();
@@ -288,7 +290,9 @@ test.describe('Project Dashboard Activity Feed', () => {
     await page.waitForLoadState('networkidle');
 
     // Look for action buttons in activity feed (if any require action)
-    const reviewButton = page.getByTestId('recent-activity').getByRole('button', { name: /review/i });
+    const reviewButton = page
+      .getByTestId('recent-activity')
+      .getByRole('button', { name: /review/i });
     const count = await reviewButton.count();
 
     // Either there are action items or not - both are valid