Fix/13062 title label misaligned, spacing issues

[gitdallas]

closes: https://issues.redhat.com/browse/RHOAIENG-13062

Description

fix the misaligned title - archived label. removed some unnecessary wrappers that were stealing the flex display and set align children to center. all 3 places will look like this now:

in the mr version details, i removed isFillColumns which was adding some extra space, added margin below the titles (Model Location and Source model format). It looks like this now:

Hoping this is good, but I was a little confused with the 8px spacing mentioned in the figma (@yih-wang ) - it seems like the figma is saying these should all be 8px:

but PF has row gap between description groups at 24px, and the gap between a descriptiongroup's term and description at 8px.
this is the PF DescriptionList default spacing, this component is using the DashboardDescriptionListGroup components (a group is a label + value) and we aren't adding any extra styling there.

The space between (the darker lime color in the image above) is PF, from the docs:

And the same spacing appears between groups on the PF examples:
list:

group:

The name and version are already grouped together:

How Has This Been Tested?

Title and "archived" label should be vertically center aligned for both archived model and version details page. The mr versions details should be spaced properly

Test Impact

none - styling changes

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change.

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.37%. Comparing base (5fccd14) to head (43a2547).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3476      +/-   ##
==========================================
- Coverage   85.39%   85.37%   -0.03%     
==========================================
  Files        1352     1352              
  Lines       30947    30947              
  Branches     8648     8648              
==========================================
- Hits        26428    26421       -7     
- Misses       4519     4526       +7     

Files with missing lines	Coverage Δ
...ns/ModelVersionDetails/ModelVersionDetailsView.tsx	95.23% <ø> (ø)
...odelVersionsArchive/ArchiveModelVersionDetails.tsx	95.83% <100.00%> (ø)
...odelVersionsArchive/ModelVersionArchiveDetails.tsx	92.85% <100.00%> (ø)
...redModelsArchive/RegisteredModelArchiveDetails.tsx	96.77% <100.00%> (ø)

... and 5 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5fccd14...43a2547. Read the comment docs.

---- 🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[mturley]

The code LGTM here, but I'll wait for a review on the spacing from @yih-wang or @vconzola before approving this

[yih-wang]

@gitdallas To answer the space question, currently there's no clear visual distinction of where's the end of a group (model location, source model format). For example, how to tell which attributes belong to the Source Model Format. Does version belong to it? Does Author belong to it? I'm trying to use different spacings (i.e., smaller spaces within the group items) to clarify that relationship.
Another choice is using divider lines, but I'm not seeing any other places are using it, or any examples from the PF description list pattern.
Would love to get your thoughts on this.

[yih-wang]

Talking with @gitdallas, I'll bring the spacing/grouping issues to PF and see what they suggest. What we have now looks good to me. Thanks!

Edit: Based on PF's feedback, it is suggested to add dividers between groups to make the hierarchy clear. See the image below. Not sure whether we should consider it as part of the scope of this issue (as a workaround for the smaller spacings within groups).

[mturley]

@gitdallas would you rather we merge this and open a followup issue for adding the dividers or do you want to add the dividers as part of this issue/PR? If you're up for it I think it might be nice to just get it done now.

[gitdallas]

With the Dividers added

[yih-wang]

Thanks for the updates @gitdallas, looks good!

[mturley]

LGTM, thanks @gitdallas !

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: mturley

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [mturley]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment