Topic content does not take up full width for very short text

Contribute Bug
,

AI-generated summary

A medium-severity bug was reported by fangjue regarding the Horizon theme on mobile devices. The issue occurs when a topic contains very short text; the content box fails to expand to the full screen width, leaving unexpected blank space on the right and causing misalignment of buttons and timestamps. fangjue provided reproducible steps and noted that posting a longer reply resolves the layout issue temporarily. A pull request (PR #37604) was submitted to address the problem. awesomerobot confirmed the bug, verified that the proposed fix works, and stated that the solution will be merged and included in upcoming Discourse updates.

1

Priority/Severity: Medium

Platform: Mobile, any OS/browser, with Horizon theme

Description: If a topic only contains short text that fits within a portion of screen width, the topic content box does not take up full width and leaves blank on the right.

Pull request: Fix grid in topic.scss of horizon theme on mobile by fangjue · Pull Request #37604 · discourse/discourse · GitHub

Reproducible steps:

  1. Create a new topic with a short title and content. For example:
    Test short topic
    Very short body text.
  2. Open the topic on mobile screens that are wider than body text. In this example, it is emulated with a Pixel 7 dimensions in Chrome DevTools.
  3. The topic content does not take up full width like other longer topics that wrap new lines. There is unexpected extra space on the right of the screen. Also the buttons are not correctly aligned with other elements on the page.
  4. If a longer reply is posted, the layout becomes normal.

Wrong layout with very short topic content:

try.discourse.org_t_test-short-topic_1497_2(Pixel 7)
try.discourse.org_t_test-short-topic_1497_2(Pixel 7)1082×2402 197 KB

Note that post time, buttons and progress are not aligned to the right with the blue topic reply button below.

After a longer reply is posted, the layout becomes normal:

(Will upload in the next reply because of the error: An error occurred: Sorry, new users can only put one embedded media item in a post.)

1 Like
2

Expected layout (and the layout after a longer reply is posted):

try.discourse.org_t_test-short-topic_1497_2(Pixel 7) (1)
try.discourse.org_t_test-short-topic_1497_2(Pixel 7) (1)1082×4032 363 KB

1 Like
3

Thanks for the report and the PR! I can reproduce the issue and have verified that the fix works. This will be merged and available in Discourse updates soon.

4 Likes
4

This topic was automatically closed after 2 days. New replies are no longer allowed.

6

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.