fix: provider card UI on dashboard

[lstocchi]

What does this PR do?

This PR updates the provider cards UI to solve the misalignment issue #6973

Screenshot / video of UI

I've recorded a video where i cover almost all states.
Install podman, initialize and start, then delete the machine and initialize it + manual start. And i shrink/enlarge the window to show the different elements position.

The initialize step takes a lot, so skip it. I did not cut the video 😆
https://drive.google.com/file/d/1YYZz5QzkBsiIm5xeRcX_PBs_tbE-zjuA/view?usp=drive_link

What issues does this PR fix or reference?

it resolves #6973

How to test this PR?

1. change state of your provider and see if it looks nice in the dashboard

• Tests are covering the bug fix or the new feature

[deboer-tim]

Scaling generally works better with this, but it causes overlap for OpenShift Local in some states, e.g.:

[lstocchi]

Scaling generally works better with this, but it causes overlap for OpenShift Local in some states

Ah good catch. I think it would be the same on podman if i have an old version that requires an update. Gonna give this a look. Thanks!!

[lstocchi]

@ekidneyrh @deboer-tim My idea is to move the update button to prevent those kind of problems.
WDYT about these 2 options? Or do you have any other idea?

1. Adding it just below the name
   
   

2. Create a new row just above the link with the button centered
   
   

For the small screen maybe we can think about moving the title to the center

[axel7083]

@ekidneyrh @deboer-tim My idea is to move the update button to prevent those kind of problems. WDYT about these 2 options? Or do you have any other idea?

Could you include same screenshots with different podman-desktop size to see how the design is responding to different windows sizes ?

[lstocchi]

@ekidneyrh @deboer-tim My idea is to move the update button to prevent those kind of problems. WDYT about these 2 options? Or do you have any other idea?

Could you include same screenshots with different podman-desktop size to see how the design is responding to different windows sizes ?

Added. I didn't make any other modification. But, maybe, we should move the title to the center

[axel7083]

@ekidneyrh @deboer-tim My idea is to move the update button to prevent those kind of problems. WDYT about these 2 options? Or do you have any other idea?

Could you include same screenshots with different podman-desktop size to see how the design is responding to different windows sizes ?

Added. I didn't make any other modification. But, maybe, we should move the title to the center

Thanks!

[deboer-tim]

@ekidneyrh @deboer-tim My idea is to move the update button to prevent those kind of problems. WDYT about these 2 options? Or do you have any other idea?

Fundamentally I think the problem is that we have four columns (name, status description, install button, update button) which is just too many. Long term I'd prefer getting rid of one :) , but short term I agree that essentially making it wrap at the equivalent of 2-3 columns makes the most sense.

Out of these options I prefer 1 since it keeps the update button closer to the version, but maybe removing a bit of the top/bottom padding around the button to keep things a little closer together.

[lstocchi]

Updated by moving the update button to the left and reducing the padding/margin.
Full-width

Shrinked

[deboer-tim]

I was still able to get the text to overlap - but I had to try really hard now. I think we're going to have diminishing returns until a bigger overhaul of what's on these tiles so let's merge and come back to this then. Well done Luca.