Improve datatable display of volunteers on `/supervisors` page

What type(s) of User Does This Feature Affect?

• supervisors
• admins

Description

We currently have the follow page for supervisors to look at their volunteers (/supervisors):

We would like to make some small-ish improvements to it.

Goals

As you can see in the screenshot 16 is shorter than 13. This is because the page makes calls to dynamically generated CSS classes https://github.com/rubyforgood/casa/blob/8ce3a077129515cad15a87bc2170f189428e70f4/app/javascript/src/dashboard.js#L342. Those classes aren't always built (or maybe they got minified out). Regardless, using classes like that isn't a good idea.

Count of Transition Age youth does not belong in the "Volunteer Info" column. Lets combine this information with volunteer information instead. Maybe something like:

or the two rows could be overlaid on each other.

Completion Criteria

• Make the table elements scale correctly
• Consider what do to do if the element if large enough that it would go off the page
• Change the transition aged data to overlay the volunteer data or be on another row

How to Access the QA Site

Login Details:
Link to QA site

Login Emails:

• volunteer1@example.com view site as a volunteer
• supervisor1@example.com view site as a supervisor
• casa_admin1@example.com view site as an admin
• all_casa_admin1@example.com view site as an all casa admin
  • go to /all_casa_admins/sign_in

password for all users: 12345678

Questions? Join Slack!

We highly recommend that you join us in slack #casa channel to ask questions quickly. And discord for office hours (currently Tuesday 5-7pm Pacific), stakeholder news, and upcoming new issues.

Start by inspecting app/javascript/src/dashboard.js around line 342 and the /supervisors datatable implementation. Reproduce the page using the QA credentials, then verify that table elements scale correctly, remain usable when content is wide, and display transition-age data in the revised volunteer information layout.