Fixed the overflow of the "quality"/"difficulty" headers in ratings for professor/course reviews.

Description

Wherever reviews can be, the rating headers (and actually the rating values and the colored box itself) were not properly resizing when the browser window changed size. I fixed this by adding a media query for between widths of 1300px and 600px (there were no issues for widths outside of that range), and adjusting the widths and heights of the rating box, rating label, and rating value. I also fixed a bug where the rating boxes weren't the correct sizes at exactly 600px wide, by updating the smaller media query to start at 599px instead of 600px.

I definitely applied some of my personal opinions to this fix, since there isn't one clear way to make this section look the best. Let me know what you guys think about my changes, and if I should make the elements react different when the window changes dimensions.

Screenshots

Before:

After:

Test Plan

Create a review, then change the dimensions of the browser window, observing the ratings at various dimensions and ensuring that the rating header both stays inside the box the entire time, and looks good in terms of spacing & sizing for all window sizes. Make sure to check different widths, different heights, and both. Focus on widths between 1300px and 600px.

Issues

Closes #304