Fix: modal for 4 or more agencies

[lalver1]

Closes #2431

This PR fixes the Agency selector modal to arrange the agencies in the following manner:

• 2 in the first row and 1 centered in the second row when 3 agencies are shown
  
• 2 in the first row and 2 in the second row when 4 agencies are shown
  
• 2 in the first row, 2 in the second row, and 1 centered in the third row when 5 agencies are shown
  
• all in one column in mobile view
  

Reviewing

Replace your local TransitAgency fixtures to use (the data is incorrect, but we only need to review the modal)

 {
   "model": "core.transitagency",
   "pk": 1,
   "fields": {
     "active": true,
     "slug": "cst",
     "short_name": "CST (local)",
     "long_name": "California State Transit (local)",
     "info_url": "https://www.agency-website.com",
     "phone": "1-800-555-5555",
     "index_template": "core/index--cst.html",
     "eligibility_index_template": "eligibility/index--cst.html",
     "eligibility_api_id": "cst",
     "eligibility_api_private_key": 2,
     "eligibility_api_public_key": 3,
     "eligibility_api_jws_signing_alg": "RS256",
     "transit_processor": 1,
     "transit_processor_audience": "",
     "transit_processor_client_id": "",
     "transit_processor_client_secret_name": "cst-transit-processor-client-secret",
     "staff_group": 2,
     "customer_service_group": 2,
     "logo_large": "agencies/cst-lg.png",
     "logo_small": "agencies/cst-sm.png"
   }
 },
 {
   "model": "core.transitagency",
   "pk": 2,
   "fields": {
     "active": true,
     "slug": "mst",
     "short_name": "MST (local)",
     "long_name": "Monterey-Salinas Transit (local)",
     "info_url": "https://www.agency-website.com",
     "phone": "1-800-555-5555",
     "index_template": "core/index--cst.html",
     "eligibility_index_template": "eligibility/index--cst.html",
     "eligibility_api_id": "cst",
     "eligibility_api_private_key": 2,
     "eligibility_api_public_key": 3,
     "eligibility_api_jws_signing_alg": "RS256",
     "transit_processor": 1,
     "transit_processor_audience": "",
     "transit_processor_client_id": "",
     "transit_processor_client_secret_name": "cst-transit-processor-client-secret",
     "logo_large": "agencies/mst-lg.png",
     "logo_small": "agencies/mst-sm.png"
   }
 },
 {
   "model": "core.transitagency",
   "pk": 3,
   "fields": {
     "active": true,
     "slug": "sbmtd",
     "short_name": "SBMTD (local)",
     "long_name": "Santa Barbara MTD (local)",
     "info_url": "https://www.agency-website.com",
     "phone": "1-800-555-5555",
     "index_template": "core/index--cst.html",
     "eligibility_index_template": "eligibility/index--cst.html",
     "eligibility_api_id": "cst",
     "eligibility_api_private_key": 2,
     "eligibility_api_public_key": 3,
     "eligibility_api_jws_signing_alg": "RS256",
     "transit_processor": 1,
     "transit_processor_audience": "",
     "transit_processor_client_id": "",
     "transit_processor_client_secret_name": "cst-transit-processor-client-secret",
     "logo_large": "agencies/sbmtd-lg.png",
     "logo_small": "agencies/sbmtd-sm.png"
   }
 },
 {
   "model": "core.transitagency",
   "pk": 4,
   "fields": {
     "active": true,
     "slug": "sacrt",
     "short_name": "SacRT (local)",
     "long_name": "Sacramento Regional Transit (local)",
     "info_url": "https://www.agency-website.com",
     "phone": "1-800-555-5555",
     "index_template": "core/index--cst.html",
     "eligibility_index_template": "eligibility/index--cst.html",
     "eligibility_api_id": "cst",
     "eligibility_api_private_key": 2,
     "eligibility_api_public_key": 3,
     "eligibility_api_jws_signing_alg": "RS256",
     "transit_processor": 1,
     "transit_processor_audience": "",
     "transit_processor_client_id": "",
     "transit_processor_client_secret_name": "cst-transit-processor-client-secret",
     "logo_large": "agencies/sacrt-lg.png",
     "logo_small": "agencies/sacrt-sm.png"
   }
 },
 {
   "model": "core.transitagency",
   "pk": 5,
   "fields": {
     "active": true,
     "slug": "nevco",
     "short_name": "NevCo (local)",
     "long_name": "Nevada County Connects (local)",
     "info_url": "https://www.agency-website.com",
     "phone": "1-800-555-5555",
     "index_template": "core/index--cst.html",
     "eligibility_index_template": "eligibility/index--cst.html",
     "eligibility_api_id": "cst",
     "eligibility_api_private_key": 2,
     "eligibility_api_public_key": 3,
     "eligibility_api_jws_signing_alg": "RS256",
     "transit_processor": 1,
     "transit_processor_audience": "",
     "transit_processor_client_id": "",
     "transit_processor_client_secret_name": "cst-transit-processor-client-secret",
     "logo_large": "agencies/nevco-lg.png",
     "logo_small": "agencies/nevco-sm.png"
   }
 }

and use Django's template filter, for example, {% for agency in active_agencies|slice:"0:3" %} (where the slice goes from 0 (included) to 3 (not included)) in

benefits/benefits/core/templates/core/includes/modal--agency-selector.html

Line 12 in 1d80b26

{% for agency in active_agencies %}

to easily change the number of agencies being displayed in the modal.

[github-actions]

Coverage report

This PR does not seem to contain any modification to coverable code.

[lalver1]

I am running into one problem still, I added

benefits/benefits/core/templates/core/includes/modal--agency-selector.html

Line 10 in 1d80b26

<h3 class="modal-title h1 p-0 mb-4 pb-lg-2s text-center"></h3>

because otherwise the cards in the mobile view are too tall, but this line is clearly unnecessary.

[machikoyasuda]

I think this could be a Bootstrap utility class, unless it needs to change for a viewport width or something:

https://getbootstrap.com/docs/5.3/utilities/sizing/#relative-to-the-parent

w-75 adds

width: 75% !important;

[lalver1]

Thanks @machikoyasuda!

Initially I was having trouble getting all the layouts to show up correctly using width: 75%; only so I tried out grid, but with

width: 75%;
margin: 0 auto;

as you wrote in the ticket makes all the layouts work. I'll update this PR shortly to keep using flex instead of grid.