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
- Open any discussion with at least 2 posts
- View it at phone width (real device or devtools device emulation, e.g. 390px)
- 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.
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.
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
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
::afterelement in devtools —widthresolves to viewport minus 50px while the post content is viewport minus 30px.Environment
Possible Solution
The divider is the
::afteron.PostStream-iteminless/forum/PostStream.less:On desktop the
100% - 20pxshortfall is correct:.Posthaspadding: var(--post-padding) var(--post-padding) var(--post-padding) 0, so the line ends exactly where the text does. ButPost.lesssetspadding-right: 0on.Postfor@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 @phoneblock in PostStream.less fixes it for me:Happy to PR this if you want.