FEATURE: Fix UI/UX on Admin Commons List page

[github-actions[bot]]

User Story

• As an admin
• I can see more of the commons list page without having to scrolll
• So that I have an improved user experience

Discussion

The current Admin Commons List page shows a table like this, which requires the user to scroll:

We can fit more of the data on the screen if we adjust the headers to introduce line breaks:

We can fit more of the data on the screen if we adjust the headers to compress the font in cases where the header is wider than the data, and in some cases, abbreviate the headers:

Hints on how to do that are listed below:

Acceptance Criteria

• [ ] As much of the commons page as possible is visible on the screen
• [ ] The meanings of the headers are still understandable to admin users

Implementation Todos

To add line breaks, we can change this:

        {
            Header:'Cow Price',
            accessor: row => row.commons.cowPrice,
            id: 'commons.cowPrice',
        },

to this, for each header:

       {
            Header: <span>Cow<br />Price</span>,
            accessor: row => row.commons.cowPrice,
            id: 'commons.cowPrice',
        },

The <br /> tag indicates a line break in HTML.

We can also change some of the <span> tags tp <small> tags. Here's what a portion of that code looks like (but only where is makes sense because the data is narrower than the header)

{
            Header: <small>Starting<br />Balance</small>,
            accessor: row => row.commons.startingBalance,
            id: 'commons.startingBalance'
        },
        {
            Header: <span>Starting<br />Date</span>,
            accessor: row => String(row.commons.startingDate).slice(0,10),
            id: 'commons.startingDate'
        },
        {
            Header: <small>Degrad<br />Rate</small>,
            accessor: row => row.commons.degradationRate,
            id: 'commons.degradationRate'
        },