[ENH] - Visual alignment of version numbers between widgets

[kcpevey]

Feature description

The package version numbers in the Requested Packages widget is not aligned with the version numbers on the Packages installed as Dependencies widget and it doesn't flow well.

Value and/or benefit

It catches my eye every time I look at it that these aren't aligned, but also I think the widget widths need to be adjusted as well.

I like the distance between the package name and version number on the Requested Packages widget, but I don't like the extra white space after the version number.

The distance between the package name and the version number on Packages installed as Dependencies is a little too far for my eye to follow, but the white space after the version number is just right.

I suggest we kill two birds with one stone and combine the two.

Anything else?

No response

[trallard]

Going to mark on hold until #265 is done

[smeragoel]

This is what I'd recommend:

and this is what it'd look like in context:

There will be a little bit too much whitespace after the package versions Packages installed as Dependencies but that's a compromise, and also we will have space for a third column if we need something down the line.

Happy to hear what you think!

[trallard]

Looking at this again I realise it's not so easy to parse the table content. I am wondering if we could add zebra lines to the table to make this easier to read. We might also want to make the headers standout with bold text or something to give some sort of visual hierarchy too. I think the text is slightly darker but this is so subtle that does not make much of a difference.

I do not mind be extra whitespace at it gives the whole thing room so it's ok.

WDYT? @gabalafou @smeragoel

Also "version constraint" could be renamed by "constraint provided/requested" - cc @kcpevey and @dharhas as they might have opinions

[dharhas]

+1 on some sort of row indicator like zebra lines and making the headers stand out. Something like version requested is definitely clearer.

[gabalafou]

:zebra:

Is there a reason in the mocks that ipykernel has neither an installed version nor a constraint?

[smeragoel]

Great feedback, I think the zebra stripes are a great idea!

I incorporated the feedback and updated the styling a bit, this is what it looks like:

1. View:

2. Edit:

Figma

@gabalafou: ~it was too annoying to keep updating all the values in all the rows~ no reason 🙃

[trallard]

I like this much better, thank you. Moving to ready for development.

[gabalafou]

Can we remove the status: blocked ⛔️ label?

[trallard]

Are you not able to remove labels @gabalafou?

[gabalafou]

I can but like Peyton, I fear to touch the labels 😆

[gabalafou]

But I'm happy to apply (my own particular brand of) common sense to managing the labels going forward :)