Update styles for pipeline badge in operations/enviroments cards footer to correctly center it vertically

What does this MR do?

For issue #39531 (closed)

All work on this issue is based on advice from the style guide found here

To solve this issue there are a handful of approaches that can be taken:

This merge uses approach 1

1. Update the ci-badge-link.vue to add the classes: d-inline-block align-middle and then a even set of padding: py-0. i.e.

From:

<ci-badge-link
      ref="status"
      class="bg-white"
      :status="lastPipeline.details.status"
      :show-text="true"
    />

To:

<ci-badge-link
      ref="status"
+     class="bg-white d-inline-block align-middle py-0"
      :status="lastPipeline.details.status"
      :show-text="true"
    />

2. Center dashboard-card-footer child content via flex display and reduce the padding on the badge link itself slightly to ensure a flush fit

From:

<div :class="pipelineClasses" class="dashboard-card-footer py-1 px-2 mt-3">

<ci-badge-link
      ref="status"
      class="bg-white py-0"
      :status="lastPipeline.details.status"
      :show-text="true"
    />

To:

+ <div :class="pipelineClasses" class="dashboard-card-footer py-1 px-2 mt-3 d-flex">

<ci-badge-link
      ref="status"
+     class="bg-white"
      :status="lastPipeline.details.status"
      :show-text="true"
    />

3. Update dashboard-card-footer padding by removing the current utility class for top/bottom padding and adding a custom line of padding inside the dashboard_skeleton.scss file i.e.

From:

<div :class="pipelineClasses" class="dashboard-card-footer py-1 px-2 mt-3">

&-footer {
    border-radius: $gl-padding;
    height: $gl-padding-32;

To:

- <div :class="pipelineClasses" class="dashboard-card-footer mt-3">

&-footer {
    border-radius: $gl-padding;
    height: $gl-padding-32;
+   padding: 0.29rem 0.5rem;

This merge uses approach 1 for a handful of reasons:

• Based on the style guide we always want to take a utility first approach to styling content in gitlab.

For option 2, we could make use of a flex layout for the dashboard card footer but this has potential for a knock on effect for other child elements inside inside the card footer i.e. upstream and downstream pipeline details.

For option 3 we could have also approached the issue by updating the CSS around the elements to use different values but this would be a less than ideal approach as it breaks the utility first concept outlined here

Screenshots

Before	After

Does this MR meet the acceptance criteria?

Conformity

• Changelog entry
• Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Availability and Testing

• Tested in all supported browsers

While I have checked the update on multiple displays and browsers, I have not written any tests for this update as I am unsure how gitlab approaches its testing for style changes. Any advice on this would be great!