Agency selector: Modal in case of 4 or more agencies

[machikoyasuda]

Status: This ticket needs more design input.

The visual bug

Currently, there are 2 3 agencies live on production. The test site has 4 5 agencies live. This is a ticket that can be worked on when we anticipate to get a 4th agency, or might become unnecessary if at that point, it is decided to re-design the agency selection modal entirely.

The agency link buttons should scale down to 2 buttons in 2 rows, rather than 3 in the first row.

Scenarios to test

All of these scenarios are in the Desktop and Tablet widths, not the Mo

• Modal with 1 agency
• Modal with 2 agencies
• Modal with 3 agencies
• Modal with 4 agencies
• Modal with 5 agencies

The desired design

For this screenshot, I achieved it by adding to card-row:

width: 75%;
margin: 0 auto;

[machikoyasuda]

This results in this kind of rendering when there are 3 agencies:

Would this be preferable? @srhhnry

[srhhnry]

Top design is preferable! To be clear: Center the row with one agency and justify left on rows with two agencies. We will likely need to revisit with more agencies, but this design has always been an interim concept.

[machikoyasuda]

@indexing Putting this ticket on your radar, to be worked on as soon as the 3rd agency is live and the 4th is ready.