On membership, in edit mode, on the edge between tablet & larger screens, there is a potential layout wobble

[benjaminapetersen]

With long or multiple roles, between ~765px and ~820px screen width there is the potential for this:

[spadgett]

Honestly I wonder if Bootstrap grid or even a table isn't better than flex for layouts like this.

[benjaminapetersen]

Agree, might be worth a restructure after all.

[benjaminapetersen]

Ideas:

• Could drop the 3rd column if we had a + action in the roles list that would open a dialog
• Could also eliminate edit/non-edit mode with the above + actions
• Or could list the role chips under the name, which would leave plenty of space (2 column again)

[sg00dwin]

There are various width/states, both edit and non-edit mode where content elements are breaking the layout.

Adding examples:

[sg00dwin]

Posting some exploratory wireframes showing members and roles using PF list-view expand rows to address scalability and be consistent with other views.

View by member

View by member expanded

Add member

View by Role

View by Role expanded

cc @benjaminapetersen @jwforres @spadgett

[benjaminapetersen]

A quick hack @ the first image above could look something like this (keeping the tabs we have):

[beanh66]

@spadgett @benjaminapetersen I like what you have as a more immediate fix. Curious what it looks like when a row is expanded? In regards to the wireframes from @sg00dwin, I like the list view idea there too! As I mentioned we did something similar in the past with assigning roles to a list of names so here is a quick view of that functionality: http://g.recordit.co/GB9EJqbG9a.gif
In this case we used a table, but I could also see it in a list view instead. When there were too many roles to display on one row we just wrapped onto a second line so the rows got taller as needed. Not sure how we would incorporate the role descriptions but something to explore further.