Change design of /staff/pets view to match /staff/manage_fosters #759

Pending

#547

Description

We have ended up with two different designs for pages that index collections with a filter. We would like to unify them in one design by changing the design of /staff/pets to match the others.

Some notable differences:

1. manage_fosters design puts the content in a bootstrap container class which is limiting how wide it will expand. pets expands to full viewport width no matter how large screen width gets.
2. manage_fosters design places the filter content in a white rounded rectangle
3. manage_fosters desktop design places the buttons below the inputs while pets spreads them away from inputs.
4. manage_fosters design has inputs equal width and they expand to container width. pets they have fixed widths for form inputs, and they wrap.

The tables themselves are also different, but in these cases that is intentional, and I think they can remain unchanged for now.

One thing that is nice that we want to keep is:

1. "Search" button and "clear filters" for mobile views in pets design expand full width.

Let's go ahead and apply that button styling to manage_fosters index and adopter_applications_review index.

If there are any differences that are unclear to you, please feel free to ask for clarification here or on slack.

Acceptance Criteria

• Refactor app/views/organizations/staff/pets/index.html.erb to match the app/views/organizations/staff/manage_fosters/index.html.erb layout
• Apply mobile button sizing of search button and clear filter to:
  • app/views/organizations/staff/manage_fosters/index.html.erb
  • app/views/organizations/staff/adoption_application_reviews/index.html.erb