Responsive bar chart

[NoahAppelbaum]

Ward Spending page is now more responsive, with a re-sizing bar chart and a consistently sized detailed spending item list.

This latest version should keep anything from scrolling off-screen, but checking edge cases is highly encourage.

There is one, tiny, known bug with the margin for the chart SVG cutting off the very edge of long category names when a large window is resized to very small and back.

[smacmullan]

Responsiveness is working nicely. I'm not concerned about the small-to-large resizing bug since I don't think users will do that too often. I did find the below issue where the labels get smushed into each other when there's too many categories displayed. I think it's the chart setup, not responsiveness. Can we shrink font size when there's a lot of categories?

I'm also hiding the budget total for now. The chart page looks very cluttered with it at the top. We're going to have to move the layout around at some point so we can cleanly display the budget, the alder, and if PB was used. For desktop I think we can move the select dropdowns left and place that info to the right above the chart. On mobile we probably need to hide the info in a pop-up.

[NoahAppelbaum]

Fair enough on the total budget header.

And I see what you mean about the category clutter. I should be able to fix that tonight or early tomorrow.

[NoahAppelbaum]

OK, added a fix to display smaller text size on charts with 10 or more categories. Also adjusted the margins of the wrap function, which is what was actually causing the floating "beautification" label in your shared image. I think the current settings handle all of our existing categories ok, but it's possible that if we start adding any new menu item categories with very long words, we will have to have to come back and look at that in the future.

Also added a quick fix to the filter drop-downs, so that my browser console would stop throwing errors.