Fix: Mobile view for Staff "Review Applications"

[nsiwnf]

Some of the buttons disappear in mobile view on the staff's "adoption applications" dashboard page. There is also no way for staff to edit notes and "create adoption" on mobile devices.

1. go to demo site
2. login as staff
   email: staff@alta.com
   password: 123456
3. go to "Adoption Applications" tab in the navbar

We should style the content so it renders as cards below 1200 px width. Use /staff/manage_fosters as a guide. It would probably be good to do something similar to this:

<!-- app/views/organizations/staff/manage_fosters/index.html.erb -->
        <!-- Search Results -->
        <%# Table layout %>
        <div class="d-none d-xl-block">
          <%= render "foster_table", foster_pets: @foster_pets %>
        </div>

        <%# Cards layout %>
        <div class="d-xl-none d-flex flex-wrap">
          <%= render "foster_cards", foster_pets: @foster_pets %>
        </div>

Acceptance Criteria

• Page index content renders cards below 1200 px width
• All card content fits on mobile screens
• Applications should be grouped by pet still (again, see /staff/manage_fosters design)

[kasugaijin]

Just some thoughts for when this is being designed. We could use a table layout like we currently have for larger widths, and for narrower widths, we get rid of the table and instead use cards. I think tables are inherently better consumed on larger screens, and cards are better for smaller screens. My two cents!

[MooseCowBear]

Might also want to consider the applications tab on the pets show page, which uses the same partial. Currently there is some overlap there to resolve.