Fix the alignment on agent activity events list

What does this MR do and why?

The MR fixes UI issues on the agent activity events list:

• The icon and title should be aligned with the text below.
• The should be 4px spacing between the title and the description of the event.
• The line that connects event icons should only be shown between the icons and not before or after.

Link to the design: https://www.figma.com/file/4LWQH8cwxMSwWlXmIxWNqu/Agent-integration-status-check-page?node-id=2777%3A28134

Screenshots or screen recordings

Before	After

How to validate in the review-app

1. Visit the project I prepared
2. Verify the Agent activity events list view
3. You can create new tokens for the agent to see more events in the list

How to set up and validate locally

1. Visit Project -> Infrastructure -> Kubernetes clusters
2. Select Connect cluster
3. Create an agent from the modal
4. Select agent's name to navigate to the agent's page
5. Verify the Agent activity events list view
6. You can create new tokens for the agent to see more events in the list

To validate using GitPod you'll need to enable KAS:

1. Go to the gitlab-development-kit folder
2. Change the gdk.yml file to add the following lines:

gitlab_k8s_agent:
  enabled: true

3. Install Bazel using Bazelisk
4. Run gdk reconfigure and gdk restart

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Review progress:

• UX review
• frontend developer review
• frontend maintainer review

Related to #373081 (closed)