HomePhabricator

Fix feed width for small devices

Description

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

Details

Provenance
jasonbcoxAuthored on Sep 28 2020, 18:36
jasonbcoxPushed on Sep 28 2020, 21:09
Reviewer
Restricted Project
Differential Revision
D7618: Fix feed width for small devices
Parents
rABCWEB1d677e37e706: Store releases JSON so the site can be version-aware
Branches
Unknown
Tags
Unknown