Improve timeline scroll, media layout, avatars, and emoji coverage.

Remember room scroll position across switches, reserve image/video heights from Matrix dimensions, cache authenticated media blobs for avatars, restore jumbo emoji-only messages, and extend emoji font unicode-range for Unicode 15 glyphs.

src/app/styles/CustomHtml.css.ts

@@ -262,9 +262,10 @@ export const EmoticonBase = style([
   DefaultReset,
   {
     display: 'inline-block',
-    padding: '0.05rem',
-    height: '1em',
-    verticalAlign: 'middle',
+    verticalAlign: '-0.1em',
+    lineHeight: 1,
+    height: 'auto',
+    padding: 0,
   },
 ]);
 
@@ -272,18 +273,10 @@ export const Emoticon = recipe({
   base: [
     DefaultReset,
     {
-      display: 'inline-flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-
-      height: '1em',
-      minWidth: '1em',
-      fontSize: '1.33em',
-      lineHeight: '1em',
-      verticalAlign: 'middle',
-      position: 'relative',
-      top: '-0.35em',
-      borderRadius: config.radii.R300,
+      display: 'inline',
+      fontSize: '1.2em',
+      lineHeight: 1,
+      verticalAlign: 'inherit',
     },
   ],
   variants: {
@@ -298,7 +291,9 @@ export const Emoticon = recipe({
 export const EmoticonImg = style([
   DefaultReset,
   {
-    height: '1em',
+    display: 'block',
+    height: '1.2em',
+    width: '1.2em',
     cursor: 'default',
   },
 ]);