From 1d1b17b04b45218233179081f5dd20b0d436fa50 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Thu, 17 Jul 2025 19:28:30 +0200
Subject: [PATCH] fix: Fix quote posts styling on notifications page (#35411)

---
 .../styles/mastodon/components.scss           | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 233ecd487..40b073f68 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1857,7 +1857,10 @@ body > [data-popper-placement] {
 }
 
 .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;
   margin-block-start: 16px;
@@ -1868,7 +1871,7 @@ body > [data-popper-placement] {
   border: var(--nested-card-border);
 
   @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;
     padding: 0;
-
-    &__avatar {
-      width: 40px;
-      height: 40px;
-    }
   }
 
   .status__wrapper-direct {
     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__action-bar,
@@ -10845,16 +10850,16 @@ noscript {
   .hashtag-bar,
   .content-warning,
   .filter-warning {
-    margin-inline-start: $icon-margin;
-    width: calc(100% - $icon-margin);
+    margin-inline-start: var(--status-gutter-width);
+    width: calc(100% - var(--status-gutter-width));
   }
 
   .more-from-author {
-    width: calc(100% - $icon-margin + 2px);
+    width: calc(100% - var(--status-gutter-width) + 2px);
   }
 
   .status__content__read-more-button {
-    margin-inline-start: $icon-margin;
+    margin-inline-start: var(--status-gutter-width);
   }
 
   .notification__report {