发布

  • fix(css): stop news-feed grid items overflowing the mobile viewport (#3731)

    frostbyte_neo 发布于 2026-04-29 16:44:15 +00:00

    The release-gate mobile-safari job has been failing on the News Feed
    mobile UI audit (Mobile Safari, 390x664):

    Overflowing Elements (5):
      - div.ldr-news-feed: 14px overflow
      - div.ldr-feed-header-section: 14px overflow
      - div.ldr-filters-bar: 14px overflow
      - div.ldr-news-cards-container: 14px overflow
      - div.: 14px overflow
    

    Root cause

    The mobile rule for .ldr-news-container collapses to a single-column
    CSS grid (grid-template-columns: 1fr), but grid items default to
    min-width: auto which evaluates to the child's intrinsic min-content
    width
    . .ldr-filter-btn and the news-meta tags inside the feed have
    white-space: nowrap + min-width: fit-content, so a single long
    filter pill is enough to widen its column past the 1fr allocation —
    which then pushes the whole feed past the viewport. The exact 14px
    matches the longest unbreakable filter content overflow on this layout.

    Fix

    Set min-width: 0 on the grid item .ldr-news-feed and its three
    overflow-flagged descendants so 1fr is actually obeyed, plus
    max-width: 100% for belt-and-suspenders against any future child
    declaring an explicit width.

    No template changes; CSS-only.

    下载附件