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

casa/app/javascript/src/dashboard.js

Line 342 in 8ce3a07

    
                       <span class="attempted-contact status-btn success-bg text-white pl-${activeContactVolunteers * 15} pr-${activeContactVolunteers * 15}">

. 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.

This issue has been open without changes for a long time! What's up?