Align unread notification dot on threads list in compact modern=group…

… layout (#8911)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/views/rooms/_EventTile.scss

@@ -782,10 +782,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
 
     // Display notification dot
     &[data-notification]::before {
+        $notification-inset-block-start: 14px; // 14px: align the dot with the timestamp row
+
         width: $notification-dot-size;
         height: $notification-dot-size;
         border-radius: 50%;
-        inset: 14px $spacing-8 auto auto; // 14px: align the dot with the timestamp row
+        inset: $notification-inset-block-start $spacing-8 auto auto;
     }
 
     &[data-notification=total]::before {
@@ -1076,7 +1078,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     .mx_EventTile {
         // Override :not([data-layout="bubble"])
         &[data-layout=group] {
-            padding-top: $spacing-4;
+            --MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
+
+            padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);
 
             &.mx_EventTile_info {
                 padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
@@ -1152,6 +1156,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
                 }
             }
         }
+
+        &[data-shape=ThreadsList][data-notification]::before {
+            inset-block-start: calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top));
+        }
     }
 }