techhub/mastodon
2
0
Fork 0
Code Activity

fix: Fix quote posts styling on notifications page (#35411)

Browse Source
This commit is contained in:
diondiondion
2025-07-17 19:28:30 +02:00
committed by David Roetzel
parent 2aff51013c
commit 1d1b17b04b
1 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/javascript/styles/mastodon/components.scss
View File

@@ -1857,7 +1857,10 @@ body > [data-popper-placement] {
} }
.status__quote { .status__quote {
--quote-margin: 36px; // --status-gutter-width is currently only set inside of
// .notification-ungrouped, so everywhere else this will fall back
// to the pixel values
--quote-margin: var(--status-gutter-width, 36px);
position: relative; position: relative;
margin-block-start: 16px; margin-block-start: 16px;
@@ -1868,7 +1871,7 @@ body > [data-popper-placement] {
border: var(--nested-card-border); border: var(--nested-card-border);
@container (width > 460px) { @container (width > 460px) {
--quote-margin: 56px; --quote-margin: var(--status-gutter-width, 56px);
} }
} }
@@ -10817,21 +10820,23 @@ noscript {
} }
} }
.status { .status:not(.status--is-quote) {
border: 0; border: 0;
padding: 0; padding: 0;
&__avatar {
width: 40px;
height: 40px;
}
} }
.status__wrapper-direct { .status__wrapper-direct {
background: transparent; background: transparent;
} }
$icon-margin: 48px; // 40px avatar + 8px gap .status {
// 40px avatar + 8px gap
--status-gutter-width: 48px;
}
.status--is-quote {
--status-gutter-width: 0;
}
.status__content, .status__content,
.status__action-bar, .status__action-bar,
@@ -10845,16 +10850,16 @@ noscript {
.hashtag-bar, .hashtag-bar,
.content-warning, .content-warning,
.filter-warning { .filter-warning {
margin-inline-start: $icon-margin; margin-inline-start: var(--status-gutter-width);
width: calc(100% - $icon-margin); width: calc(100% - var(--status-gutter-width));
} }
.more-from-author { .more-from-author {
width: calc(100% - $icon-margin + 2px); width: calc(100% - var(--status-gutter-width) + 2px);
} }
.status__content__read-more-button { .status__content__read-more-button {
margin-inline-start: $icon-margin; margin-inline-start: var(--status-gutter-width);
} }
.notification__report { .notification__report {