ui: Fix spacing issues in composite row detail section

[kaxcode]

🐛 Fix-ups in all the lists using the %composite-row styling component.

The following fixes were done:

• Replaced definition lists with spans.

NSpace List Before:

NSpace List After:

• Show CopyButton if it's the first item in details

Lock Session List Before:

Lock Session List After:

• Remove extra spacing from CopyButton

Upstream List Before:

Upstream List After:

• Added left padding to the details of lists with health check icon in the header

Node List Before:

Node List After:

• Move copy button to be in span tag

[johncowen]

Thanks for taking a look at this!

Could you screengrab some "before and afters" for me, I'm just looking at the issue for this and it says it's about equalling out the spacing between groups of Policies/Roles with the individual Policies/Roles themselves in for example Namespaces (so making the space between the groups the same as the space between the things in the groups)

There seems to be a lot of change here for a spacing tweak and I'm not sure what else has changed visually. Maybe you didn't mean to commit all of this or is it a "feed two birds with one scone" thing? For example I saw a bunch of conditionals in the session listing.

Move copy button to be in dt tag.

We've been trying not to put CopyButtons into dt tags and we've been specifically moving CopyButtons out of them as something with no text doesn't make for a great title from a semantic and/or accessibility viewpoint., for example here #8850 .

Anyway let me know and I can take another pass at it.

[kaxcode]

We've been trying not to put CopyButtons into dt tags and we've been specifically moving CopyButtons out of them as something with no text doesn't make for a great title from a semantic and/or accessibility viewpoint., for example here #8850 .

Oh, I see. Using a dl doesn't make sense with a copy button in these composite rows. I will be putting the copy buttons in a span if they are in a composite row.

[kaxcode]

Could you screengrab some "before and afters" for me, I'm just looking at the issue for this and it says it's about equalling out the spacing between groups of Policies/Roles with the individual Policies/Roles themselves in for example Namespaces (so making the space between the groups the same as the space between the things in the groups)

I've added some screenshots. Yes, I did fix all the nspace list issues.

There seems to be a lot of change here for a spacing tweak and I'm not sure what else has changed visually. Maybe you didn't mean to commit all of this or is it a "feed two birds with one scone" thing? For example I saw a bunch of conditionals in the session listing.

Not every change was a bug. Some of it was just refactoring such as removing classes unused, removing unnecessary dl tags, and other spacing requests.

[kaxcode]

@johncowen I've added some screenshots and provided examples to the changes made.

[kaxcode]

This PR has been out for a bit. Rebased against master.

[johncowen]

Great! Thanks for the screengrabs!

Could we split out the changes for hiding certain Session listing icons when the values aren't set to a separate PR, those changes feel the most like they could possibly use a separate PR.

Lemme know and I can take another look.

[kaxcode]

Great! Thanks for the screengrabs!

Could we split out the changes for hiding certain Session listing icons when the values aren't set to a separate PR, those changes feel the most like they could possibly use a separate PR.

Lemme know and I can take another look.

@johncowen it would be hard to split that out at this point. Also, not having those conditionals creates spacing issues which is what this PR is about.

[kaxcode]

@johncowen removed the conditionals from Lock Sessions and I've added a changelog.

[johncowen]

Cool thanks for doing that! I think I have one more question - for the upstream list should the detail 'line/row' go under the healthcheck icon, or over to the right of it? I'm actually super glad you added those grabs as I think I've seen another little bug we could fix up.

[kaxcode]

Cool thanks for doing that! I think I have one more question - for the upstream list should the detail 'line/row' go under the healthcheck icon, or over to the right of it? I'm actually super glad you added those grabs as I think I've seen another little bug we could fix up.

@johncowen I've added the spacing for upstreams list in a separate commit.

[johncowen]

Hey

I've just noticed that sometimes the rows in the Service > Upstreams listing have healthcheck icons and sometimes they don't, so applying the fix here makes the upstreams listing look like the how the nspace listing previously was: