Move unread notification dots of the threads list to the expected position (#8700)

* Change dot size from 10px to 8px

Signed-off-by: Suguru Hirahara <[email protected]>

* Set inset 8px to the dot

Signed-off-by: Suguru Hirahara <[email protected]>

* Use shorthand properties for inset

Signed-off-by: Suguru Hirahara <[email protected]>

* Move blocks from '.mx_EventTile:not([data-layout=bubble])' to '.mx_EventTile[data-shape=ThreadsList]'

For a notification dot it does not matter whether the layout of the event tile is bubble or not. Instead what matters is that the dot is expected to be displayed on the threads list.

Signed-off-by: Suguru Hirahara <[email protected]>

* Remove redundant declarations

Signed-off-by: Suguru Hirahara <[email protected]>

* Remove an obsolete z-index declaration

The declaration was added with ed34952 to fix a clickability issue. Now the event tile is clickable everywhere, it is no longer required.

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/views/rooms/_EventTile.scss

@@ -79,25 +79,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     font-size: $font-14px;
     position: relative;
 
-    &[data-shape=ThreadsList][data-notification]::before {
-        content: "";
-        position: absolute;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        right: -25px; // center it in the gutter (16px margin + 4px padding + half 10px width)
-        top: 4px;
-        left: auto;
-    }
-
-    &[data-shape=ThreadsList][data-notification=total]::before {
-        background-color: $room-icon-unread-color;
-    }
-
-    &[data-shape=ThreadsList][data-notification=highlight]::before {
-        background-color: $alert;
-    }
-
     .mx_ThreadSummary,
     .mx_ThreadSummaryIcon {
         margin-left: 64px;
@@ -780,12 +761,23 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     &::before {
         content: "";
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        /* enough to cover all sibling elements */
-        z-index: 10;
+        inset: 0;
+    }
+
+    // Display notification dot
+    &[data-notification]::before {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        inset: 14px 8px auto auto; // 14px: align the dot with the timestamp row
+    }
+
+    &[data-notification=total]::before {
+        background-color: $room-icon-unread-color;
+    }
+
+    &[data-notification=highlight]::before {
+        background-color: $alert;
     }
 
     &:last-child {