(Feature request) Align Attributes and Properties (CSS Grid?)

[cwilliams5]

Describe feature

OK, yes I do have OCD. But! The way promoted attributes and basic properties use flex box causes things to often not line up properly. The left side and ride side of individual elements are constantly out of line. I have been playing with switching them to css grid in my custom theme and I think it is probably an improvement.

Here is basic attributes in movement:

Notice how "Protect the Note" never aligns with the item in the column below it.
(Side note, it doesn't say Bookmark the Note, Shared the Note, things would be way more compact without Protect the Note. It could be just Protect, or Protect Note at the most. "the" is odd in there".

If we change the basic attributes to a CSS grid we get this:

Notice how the items within a column remain aligned together. Now, it's not perfect. I have to specify a min-width to the element which ideally wouldn't be necessary but I haven't found a way. I'd really like to also have the items have equal widths to each other for a perfect look but I haven't gotten that part working yet (help wanted!). Here is the CSS for this:

/* attempt a grid layout for basic properties */
.basic-properties-widget {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(210px, max-content))  !important;
}

It's the same for promoted attributes. Here is one of mine:

Notice how before I collapse it absolutely nothing lines up! The text on the left, the icons on the right, all a mess. But with a grid based layout:

We are in alignment! Css:

/* attempt a grid layout for promoted attributes */
.promoted-attributes-container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(400px, max-content))  !important;
}

Additional Information

I haven't added this to my theme (Midnight) yet, if anyone has feedback on whether they would like it let me know. With a little more testing of my own I'll probably add it.

Also if anyone can help me figure out how to force the elements of the basic properties to all have equal widths let me know. I think the key is converting their flex boxes into grids as well, i have kind of made it work element by element but trying to generalize it to all basic properties so far is eluding me.