Make shared-components tiles render identically outside Element Web - #4 (#33622)

* Use shared MessageTimestampView in edit history

* Move timestamp typography into shared component

* Updated snapshots

* Update comments after clean up

* Fixed sonar issue and added tests for improved coverage

* Fix Prettier issue

* Fix font-size on timestamps and toolbar button sizing

* Updated snapshots

* Updated Storybook screenshots

* Updated screenshots

* Clean up app/web unused/redundant styling for disambiguated profile

* Fix merge error

* Fixes after merge

* Fixes after merge

apps/web/res/css/views/messages/_DisambiguatedProfile.pcss

@@ -7,26 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_DisambiguatedProfile {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
-
-    .mx_DisambiguatedProfile_displayName {
-        font: var(--cpd-font-body-md-semibold);
-        margin-inline-end: 0;
-        /* keeps the height in check, important for the bubble apperance */
-        line-height: 1;
-    }
-
-    .mx_DisambiguatedProfile_mxid {
-        color: $secondary-content;
-        font-size: var(--cpd-font-size-body-sm);
-        margin-inline-start: 5px;
-    }
-}
-
 /** Disambiguated profile needs to have a different layout in the member tile */
 .mx_MemberTileView .mx_DisambiguatedProfile {
     display: flex;

apps/web/res/css/views/right_panel/_ThreadPanel.pcss

@@ -138,10 +138,6 @@ Please see LICENSE files in the repository root for full details.
         box-sizing: border-box;
     }
 
-    .mx_MessageTimestamp {
-        color: $secondary-content;
-    }
-
     .mx_BaseCard_footer {
         text-align: left;
         font-size: $font-12px;

apps/web/res/css/views/rooms/_EventBubbleTile.pcss

@@ -288,7 +288,7 @@ Please see LICENSE files in the repository root for full details.
 
         /* the selector here is quite weird because timestamps can appear linked & unlinked and in different places */
         /* in the DOM depending on the specific rendering context */
-        > a, /* timestamp wrapper anchor */
+        > a, /* linked timestamp element */
         .mx_MessageActionBar + .mx_MessageTimestamp {
             position: absolute;
             padding: 4px 8px;
@@ -322,7 +322,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_EventTile_sticker {
-            > a, /* timestamp wrapper anchor */
+            > a, /* linked timestamp element */
             .mx_MessageActionBar + .mx_MessageTimestamp {
                 /* position timestamps for stickers to the right of the un-bubbled sticker */
                 right: unset;
@@ -434,7 +434,7 @@ Please see LICENSE files in the repository root for full details.
             .mx_EventTile_reply {
                 max-width: 90%;
                 padding: 0;
-                > a, /* timestamp wrapper anchor */
+                > a, /* linked timestamp element */
                 .mx_MessageActionBar + .mx_MessageTimestamp {
                     display: none !important;
                 }
@@ -549,7 +549,7 @@ Please see LICENSE files in the repository root for full details.
         font-style: italic;
 
         > a {
-            /* timestamp anchor wrapper */
+            /* linked timestamp element */
             align-self: center;
             bottom: unset;
             top: unset;
@@ -606,7 +606,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_EventTile_line {
-        > a, /* timestamp wrapper anchor */
+        > a, /* linked timestamp element */
         .mx_MessageActionBar + .mx_MessageTimestamp {
             right: auto;
             left: -77px;