Fix feed width for small devices
Summary:
Using white-space: nowrap in conjunction with text-overflow: ellipsis produces
strange results when the parent container is too small to contain the element in question.
The parent appears unable to determine the proper width regardless of the existance of
width: 100%, similar attempted fixes, or of the sizes of parents further up the DOM.
The apparent behavior of this issue is documented by this post:
https://medium.com/@gaurav5430/css-flex-positioning-gotchas-child-expands-to-more-than-the-width-allowed-by-the-parent-799c37428dd6
However, the post does not identify the actual root cause, and the proposed solutions only
appear to work in specific circumstances. Rather than wrestle with this further, I opted
to just enforce the layout of the blog feed based on screen size. This produces consistent
results for small devices without altering the experience for larger devices.
Test Plan:
make serve
View the homepage on various screen sizes. The feed should appear to grow and shrink with the
screen size as one would expect.
Reviewers: #bitcoin_abc, Fabien
Reviewed By: #bitcoin_abc, Fabien
Differential Revision: https://reviews.bitcoinabc.org/D7618