Skip to content

[2.x] Post divider is lopsided on mobile (stops 20px short on the right) #4690

@linkrobins

Description

@linkrobins

Current Behavior

On phone widths the thin divider line between posts in a discussion doesn't line up with the posts. It's flush with the left edge of the post content but stops about 20px short of the right edge. At a 390px viewport the line sits 15px from the left side of the screen and 35px from the right, so the whole post stream looks slightly left-heavy, even though the posts themselves are evenly spaced (15px both sides).

Easy to miss on a big screen, but once you notice it on a phone you can't unsee it.

Steps to Reproduce

  1. Open any discussion with at least 2 posts
  2. View it at phone width (real device or devtools device emulation, e.g. 390px)
  3. Look at the horizontal line between two posts: its left end aligns with the text, but its right end stops well before the text's right edge

Expected Behavior

The divider spans the same width as the post content, with equal spacing on both sides.

Screenshots

Can add some if helpful, but it's quicker to just measure the ::after element in devtools — width resolves to viewport minus 50px while the post content is viewport minus 30px.

Image Image

Environment

  • Flarum version: 2.0.0-rc.1, also reproduced on current 2.x-dev
  • Website URL: localhost (dev install)
  • Webserver: PHP built-in server (dev)
  • Hosting environment: local
  • PHP version: 8.5.6
  • Browser: Chromium 148

Possible Solution

The divider is the ::after on .PostStream-item in less/forum/PostStream.less:

&::after {
  content: "";
  display: block;
  width: calc(~"100% - var(--post-padding)");
  height: 1px;
  background-color: var(--control-bg);
  margin-right: auto;
}

On desktop the 100% - 20px shortfall is correct: .Post has padding: var(--post-padding) var(--post-padding) var(--post-padding) 0, so the line ends exactly where the text does. But Post.less sets padding-right: 0 on .Post for @media @phone, which makes the post content full width — and the divider is the only thing still missing those 20px on the right.

Adding this inside the already existing @media @phone block in PostStream.less fixes it for me:

&::after {
  width: 100%;
}

Happy to PR this if you want.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions