ui: optimize card margins and centering of the 'No completed projects yet' empty state

[komalharshita]

Description

The portfolio analyzer empty state container ("No completed projects yet") has large margins but the child contents (bar chart icon, text title, and descriptive link) are not perfectly centered vertically and horizontally, which looks visually unbalanced on wide screens.

We should center-align all contents using a flex layout.

Current Behavior

Child elements of the portfolio empty state card align to the left or are slightly off-center.

Proposed Solution

1. Apply centering properties (text-align: center, margin: 0 auto) to the empty state card container.
2. Ensure child items stack cleanly with uniform spacing.

Implementation Guidance

• Edit styles in src/templates/index.html or static styles.

Acceptance Criteria

• Content inside the empty state card is perfectly centered on desktop and mobile screens.
• No awkward line wrapping occurs for the description string.

Contributor Guidelines

Interested in working on this issue?

1. Comment /assign to request assignment.
2. Wait until the issue shows you as the assignee.
3. Create a new branch for your changes.
4. Submit a Pull Request referencing this issue.

Please do not begin working on an issue already assigned to another contributor unless a maintainer confirms it is available.

[pisum-sativum]

/assign

[github-actions]

Hey @pisum-sativum, this issue is already assigned to @komalharshita. Please find another open issue!