Fixes for grouped and ungrouped layout in notifications

CHANGELOG.md

@@ -1,7 +1,8 @@
-### 2.0.0rc41: 2024-07-11
+### 2.0.0rc42: 2024-07-11
 
 * Support for grouped notifications [#30440](https://github.com/mastodon/mastodon/pull/30440)
 * Finalize styles for custom icons in grouped notifications
+* Fixes for grouped and ungrouped layout in notifications
 
 ### 2.0.0rc39: 2024-06-30
 

layout-multiple-columns.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   2.0.0rc41 */
+   2.0.0rc42 */
 
 /* CSS variables */
 :root {

layout-single-column.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   2.0.0rc41 */
+   2.0.0rc42 */
 
 /* CSS variables */
 :root {
@@ -1554,6 +1554,17 @@ body.embed .detailed-status__display-avatar > img,
   padding-left: var(--gap-default);
 }
 
+/* Fix spacing under quoted post in grouped notification */
+.notification-group .notification-group__embedded-status__content {
+  max-height: 100%;
+}
+
+/* We don't need to show our own account when we know our own account is being mentioned */
+.notification-ungrouped.notification-ungrouped--mention .notification-ungrouped__header,
+.notification-group .notification-group__embedded-status__account {
+  display: none;
+}
+
 .layout-single-column .notification-ungrouped .notification-ungrouped__header {
   padding-left: calc(24px + var(--gap-default));
 }
@@ -1865,10 +1876,14 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
 }
 
 /* Notifications */
+.layout-single-column .notification-group,
 .layout-single-column .notification__message {
   display: grid;
   gap: var(--gap-default);
   grid-template-columns: minmax(0, var(--size-avatar)) minmax(0, 1fr);
+}
+
+.layout-single-column .notification__message {
   height: calc(var(--gap-default) * 2);
 }
 
@@ -2273,6 +2288,15 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   width: 27px;
 }
 
+.layout-single-column .notification-group .notification-group__icon .icon {
+  margin-right: 0;
+}
+
+.layout-single-column .notification-group .notification-group__icon {
+  justify-self: end;
+  margin-right: 4px;
+}
+
 .layout-single-column .notification-group .notification-group__icon .icon-repeat,
 .layout-single-column .notification .notification__message .icon.icon-retweet {
   color: var(--color-green);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mastodon-bird-ui",
-  "version": "2.0.0rc41",
+  "version": "2.0.0rc42",
   "description": "",
   "main": "index.js",
   "scripts": {