Improved magic and staleness indicator animations

src/web/stylesheets/layout/_io.css

@@ -126,8 +126,9 @@
 }
 
 #stale-indicator {
-    visibility: hidden;
-    transition: all 0.3s;
+    opacity: 1;
+    visibility: visibile;
+    transition: margin 0s, opacity 0.3s;
     margin-left: 5px;
     cursor: help;
 }
@@ -148,12 +149,24 @@
 }
 
 #magic {
-    visibility: hidden;
-    transition: all 0.3s;
+    opacity: 1;
+    visibility: visibile;
+    transition: margin 0s 0.3s, opacity 0.3s 0.3s, visibility 0.3s 0.3s;
     margin-left: 5px;
     margin-bottom: 5px;
 }
 
+#magic.hidden,
+#stale-indicator.hidden {
+    visibility: hidden;
+    transition: opacity 0.3s, margin 0.3s 0.3s, visibility 0.3s;
+    opacity: 0;
+}
+
+#magic.hidden {
+    margin-left: -32px;
+}
+
 #magic svg path {
     fill: var(--primary-font-colour);
 }

src/web/stylesheets/utils/_general.css

@@ -20,6 +20,10 @@ body {
     color: var(--subtext-font-colour);
 }
 
+.data-text {
+    font-family: var(--fixed-width-font-family);
+}
+
 .word-wrap {
     white-space: pre !important;
     word-wrap: normal !important;