Discourse/discourse
Discourse/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-08-17 18:04:11 +08:00
Code Packages Activity Actions 4

UX: improve quote title alignment, wrapping (#33796)

Browse source 
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"
/>
This commit is contained in:
Kris 2025-07-23 16:21:55 -04:00 • committed by GitHub
parent d249c46224
commit 5ddd04fa0b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 51 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

38
app/assets/stylesheets/common/base/topic-post.scss
View file

@ -629,6 +629,9 @@ aside.quote {
margin-bottom: 1em;
.title {
display: flex;
align-items: start;
gap: var(--space-2);
color: var(--primary-high-or-secondary-low);
padding: 0.8em 0.8em 0 0.8em;
@ -639,13 +642,36 @@ aside.quote {
cursor: pointer;
}
// blockquote is underneath this and has top margin
.avatar {
margin-right: 0.5em;
a {
@include ellipsis;
}
img {
margin-top: -0.26em;
.badge-category__wrapper {
align-self: center;
}
.quote-controls {
min-height: 24px; // match avatar height for alignment
}
// empty control div can impact layout, so hide it
&:not([data-has-quote-controls]) {
.quote-controls {
display: none;
}
}
}
.quote-title__text-content {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--space-2);
min-width: 0;
.badge-category__wrapper {
align-self: auto;
}
}
@ -677,9 +703,9 @@ aside.quote {
}
.quote-controls {
float: right;
display: flex;
align-items: center;
margin-left: auto;
a {
margin-left: 0.3em;

4
lib/onebox/templates/discourse_topic_onebox.mustache
View file

@ -2,7 +2,9 @@
<div class='title'>
<div class='quote-controls'></div>
{{{avatar}}}
<a href="{{original_url}}">{{{title}}}</a> {{{category_html}}}
<div class="quote-title__text-content">
<a href="{{original_url}}">{{{title}}}</a> {{{category_html}}}
</div>
</div>
<blockquote>
{{{quote}}}

24
spec/services/username_changer_spec.rb
View file

@ -597,9 +597,11 @@ RSpec.describe UsernameChanger do
<aside class="quote" data-post="#{quoted_post.post_number}" data-topic="#{quoted_post.topic.id}">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="#{avatar_url}" class="avatar">
<a href="#{protocol_relative_url(quoted_post.full_url)}">#{quoted_post.topic.title}</a>
</div>
<img alt="" width="24" height="24" src="#{avatar_url}" class="avatar">
<div class="quote-title__text-content">
<a href="#{protocol_relative_url(quoted_post.full_url)}">#{quoted_post.topic.title}</a>
</div>
</div>
<blockquote>
quoted post
</blockquote>
@ -608,9 +610,11 @@ RSpec.describe UsernameChanger do
<aside class="quote" data-post="#{quoted_post.post_number}" data-topic="#{quoted_post.topic.id}">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="#{avatar_url}" class="avatar">
<a href="#{protocol_relative_url(quoted_post.topic.url)}">#{quoted_post.topic.title}</a>
</div>
<img alt="" width="24" height="24" src="#{avatar_url}" class="avatar">
<div class="quote-title__text-content">
<a href="#{protocol_relative_url(quoted_post.topic.url)}">#{quoted_post.topic.title}</a>
</div>
</div>
<blockquote>
quoted post
</blockquote>
@ -628,7 +632,9 @@ RSpec.describe UsernameChanger do
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="#{avatar_url}" class="avatar">
<a href="#{protocol_relative_url(quoted_post.full_url)}">#{quoted_post.topic.title}</a>
<div class="quote-title__text-content">
<a href="#{protocol_relative_url(quoted_post.full_url)}">#{quoted_post.topic.title}</a>
</div>
</div>
<blockquote>
quoted post
@ -638,7 +644,9 @@ RSpec.describe UsernameChanger do
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="#{user_avatar_url(evil_trout)}" class="avatar">
<a href="#{protocol_relative_url(another_quoted_post.full_url)}">#{another_quoted_post.topic.title}</a>
<div class="quote-title__text-content">
<a href="#{protocol_relative_url(another_quoted_post.full_url)}">#{another_quoted_post.topic.title}</a>
</div>
</div>
<blockquote>
evil post