mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-04 03:30:38 +08:00
5ddd04fa0b
Reported here: https://meta.discourse.org/t/expand-quote-arrow-new-line-creates-gap-in-quote-style/375067 In cases of long content and narrow viewports, sometimes quote content can break the layout: <img width="244" alt="image" src="https://github.com/user-attachments/assets/3674cabb-e278-4bec-a9cf-48623dfdce6c" /> This improves the situation by adding an additional wrapper to the quote onebox title and category. This allows text to wrap independently from the avatar and controls, and in worst cases the text truncates: <img width="500" alt="image" src="https://github.com/user-attachments/assets/3e29bf52-0b36-4f70-8237-22ee3b9377b2" /> <img width="300" alt="image" src="https://github.com/user-attachments/assets/8fbd83bf-dafd-42cc-a470-a928c252c183" /> Even without a post HTML rebuild for the quotes to get the new wrapper, the new CSS prevents layout breakage through `text-overflow: ellipsis;` alone Old quote without the new wrapper, but with the new CSS: <img width="350" alt="image" src="https://github.com/user-attachments/assets/8922bce0-17a7-4731-a1de-33daad9d7b37" /> |
||
|---|---|---|
| .. | ||
| github | ||
| json_ld_partials | ||
| _layout.mustache | ||
| allowlistedgeneric.mustache | ||
| amazon.mustache | ||
| discourse_category_onebox.mustache | ||
| discourse_topic_onebox.mustache | ||
| discourse_user_onebox.mustache | ||
| discoursetopic.mustache | ||
| githubactions.mustache | ||
| githubblob.mustache | ||
| githubcommit.mustache | ||
| githubfolder.mustache | ||
| githubgist.mustache | ||
| githubissue.mustache | ||
| githubpullrequest.mustache | ||
| githubrepo.mustache | ||
| gitlabblob.mustache | ||
| googledocs.mustache | ||
| googledrive.mustache | ||
| googleplayapp.mustache | ||
| hackernews.mustache | ||
| instagram.mustache | ||
| pastebin.mustache | ||
| pdf.mustache | ||
| preview_error_fragment_onebox.mustache | ||
| preview_error_onebox.mustache | ||
| pubmed.mustache | ||
| stackexchange.mustache | ||
| threadsstatus.mustache | ||
| twitterstatus.mustache | ||
| wikimedia.mustache | ||
| wikipedia.mustache | ||
| xkcd.mustache | ||
