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

packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.module.css

@@ -7,7 +7,7 @@
 
 .content {
     color: var(--cpd-color-text-secondary); /* override anchor color */
-    font-size: var(--cpd-font-size-body-xs);
+    font-size: 0.625rem; /* There is no Compound equivalent to $font-10px */
     font-variant-numeric: tabular-nums;
     display: inline-block;
     white-space: nowrap;

packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.tsx

@@ -53,7 +53,7 @@ export interface MessageTimestampViewActions {
  * The view model for the message timestamp.
  *
  * Snapshot data describes timestamp content and rendering behavior, while
- * container styling is supplied via component props.
+ * host layout and placement styling is supplied via component props.
  */
 export type MessageTimestampViewModel = ViewModel<MessageTimestampViewSnapshot> & MessageTimestampViewActions;
 
@@ -74,11 +74,11 @@ interface MessageTimestampViewProps {
  * The view model provides the timestamp values and display options. The component
  * can render as a link when `href` is set, and can show both sent-at and received-at
  * times in the tooltip when `tsReceivedAt` is provided. Use `className` for
- * host-level styling.
+ * host-level layout and placement styling.
  *
  * @example
  * ```tsx
- * <MessageTimestampView vm={messageTimestampViewModel} className="mx_MessageTimestamp" />
+ * <MessageTimestampView vm={messageTimestampViewModel} />
  * ```
  */
 export function MessageTimestampView({ vm, className }: Readonly<MessageTimestampViewProps>): JSX.Element {