Fix top truncation in posts-list sections
Fix top truncation in posts-list sections

Material UI's Grid uses negative margins to implement padding between
sections, which, if you don't do something about it, leads to an
unfortunate horizontal scrollbar. Their documentation suggests three
workarounds: (1) put padding around it in the parent element (bad
because there are many different parent elements, and non-fake padding would
cause problems on narrow phone screens); (2) add overflow-x: hidden to
the Grid element; or (3) don't use spacing, and implement it yourself.

Previously, I tried (2) (overflow-x:hidden). This unfortunately caused a
different problem: in post lists, the top item has a negative top
margin, putting it technically outside the bounds of its container, and
so overflow-x:hidden meant the top of it was hidden. This becomes
visible when you hover over it and the hover background effect is off,
or if there are no posts to display. And it seems that the negative
margin is, in fact, achieving a genuine aesthetic improvement in the
most natural way, so, it doesn't make sense to take it out. That leaves
(3), don't use the material-UI Grid spacing. That's what this patch
does: it sets spacing={0} (the default) and adjusts other padding and
margins to compensate, leaving the page layout similar to what it was
before, but with neither horizontal scrolling nor weird truncation
issues.

Discordius/Lesswrong2,Discordius/Telescope,Discordius/Lesswrong2,Discordius/Telescope,Discordius/Lesswrong2,Discordius/Telescope,Discordius/Telescope,Discordius/Lesswrong2