Inconsistency in list component

[mmoulian]

Throughout the different functionalities of the Demo we have different ways of organizing the information in lists.
From my point of view, the options with two columns are clearer. I would leave it as the standard component but reduce the spacing between columns.

Clusters, GitOpSet, Terraform, Source: two columns

See image as reference:

Secrets, Delivery, Policies: One column

See image as reference:

!

[alfaris]

@mmoulian
I already edited the design in Secrets to match the system

and ready for the Front End Team implement it wherever they will be able

[jpellizzari]

Lets standardize on the "right aligned" values in the key-value pair UI.

Acceptance Criteria: This should componentized into a <KeyValueTable /> component (or similar name)

[TheGostKasper]

I would leave it as the standard component but reduce the spacing between columns.
Clusters, GitOpSet, Terraform, Source: two columns

By doing this we will end up with reducing the width of the table td to let's say 150px instead of 200px which will not solve the issue in some other pages as the row key sometimes be Last Attempted Revision and kind

imagine Last Attempted Revision wasn't there

To be able to achieve the optimal solution for it we need to use Table and let td width determines the width of the first column key, something like

Using this will cause some restrictions with the conversion to FLEX wrapper as it's what we are hopping for consistency in gap between items (sections, key/value, icon+text , chips,...)

In application details, we moved the details items to a collapsible and we ended up displaying the items in two grid

Fixed width
following the same pattern we choose to show items so with setting width to 170px

Table
actually we will end up showing it in two tables as a grid !?

@mmoulian @alfaris
what options we have here?
1- Use table to show key/value and let the width be calculated by the max-width key => in application details we will end up using two tables to show items the clean way but we can also show it in one table but it will be messy a little bit .

2- Use Flex and set a min-width to the key
3- Clusters, GitOpSet, Terraform, Source: two columns => make the change to use Flex instead of fixed width table

[alfaris]

Thank you for your comprehensive analysis and technicality behind the view, and I prefer option 2.

Utilizing Flex with a min-width for the key sounds like a balanced solution that maintains consistency while allowing for the necessary adjustments.
This approach should effectively address the spacing issues and accommodate various scenarios across different pages.

[mmoulian]

Yes, thanks for your work!!
Above all, my concern was consistency. I agree with @alfaris option 2 also seems the best (display: flex; + min-width)