Page MenuHomePhabricator

Fix feed width for small devices
ClosedPublic

Authored by jasonbcox on Sep 28 2020, 18:43.

Details

Reviewers
Fabien
Group Reviewers
Restricted Project
Commits
rABCWEB755c7fabe991: 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.

Diff Detail

Repository
rABCWEB Bitcoin ABC Website
Branch
fix-feed-width
Lint
No Lint Coverage
Unit
No Test Coverage
Build Status
Buildable 12987
Build 26035: arc lint + arc unit

Event Timeline

announcements.html
6

posts-list was removed because it's not used and not defined anywhere.

This revision is now accepted and ready to land.Sep 28 2020, 20:03
This revision was automatically updated to reflect the committed changes.