Fix left positioned tooltips being wrong and offset by fixed value (#7551)

Previously, the `left` positioning seemed to only work with icons which are all about the same size so the arbitrary offset worked. Now we actually position off to the left of the element and we have equal `margin-left` and `margin-right` to determine the offset.

Spawned from https://github.com/matrix-org/matrix-react-sdk/pull/7339#discussion_r767154349

res/css/views/elements/_Tooltip.scss

@@ -60,7 +60,8 @@ limitations under the License.
     font-weight: 500;
     max-width: 200px;
     word-break: break-word;
-    margin-right: 50px;
+    margin-left: 6px;
+    margin-right: 6px;
 
     background-color: #21262C; // Same on both themes
     color: $accent-fg-color;

res/css/views/rooms/_EventTile.scss

@@ -20,6 +20,10 @@ $left-gutter: 64px;
 .mx_EventTile {
     .mx_EventTile_receiptSent,
     .mx_EventTile_receiptSending {
+        // Give it some dimensions so the tooltip can position properly
+        display: inline-block;
+        width: 14px;
+        height: 14px;
         // We don't use `position: relative` on the element because then it won't line
         // up with the other read receipts