emoji style fixes (#227)

* emoji style fixes

* fixes non-square emoji being stretched to fit a square, both in
  statuses and in autosuggestions
* sizes emoji proportionally to text, so emoji won't look all tiny in
  expanded statuses
* emoji sizing and positioning similar to mastodon web

* prevent emoji from pushing down the line below them

routes/_components/compose/ComposeAutosuggestionList.html

@@ -69,6 +69,7 @@
     grid-area: icon;
     width: 48px;
     height: 48px;
+    object-fit: contain;
   }
   .compose-autosuggest-list-display-name {
     grid-area: display-name;
@@ -105,4 +106,4 @@
       Avatar
     }
   }
-</script>
+</script>

routes/_components/status/StatusContent.html

@@ -22,9 +22,11 @@
   }
 
   :global(.status-content .status-emoji) {
-    width: 20px;
+    width: 1.4em;
-    height: 20px;
+    height: 1.4em;
-    margin: -3px 0;
+    margin: -0.1em 0;
+    object-fit: contain;
+    vertical-align: middle;
   }
 
   :global(.status-content p) {
@@ -133,4 +135,4 @@
       }
     }
   }
-</script>
+</script>

routes/_components/status/StatusSpoiler.html

@@ -17,9 +17,11 @@
   }
 
   :global(.status-spoiler .status-emoji) {
-    width: 20px;
+    width: 1.4em;
-    height: 20px;
+    height: 1.4em;
-    margin: -3px 0;
+    margin: -0.1em 0;
+    object-fit: contain;
+    vertical-align: middle;
   }
 
   .status-spoiler.status-in-own-thread {
@@ -80,4 +82,4 @@
       }
     }
   }
-</script>
+</script>