page_loader: Correct hard-coded pixel values.

web/src/loading.ts

@@ -19,6 +19,10 @@ export function make_indicator(
     } = {},
 ): void {
     let $container = $outer_container;
+    // The pixel values here were established under a 14px
+    // font-size, so we convert the values to ems using
+    // this value
+    const legacy_em_in_px = 14;
 
     // TODO: We set white-space to 'nowrap' because under some
     // unknown circumstances (it happens on Keegan's laptop) the text
@@ -61,9 +65,9 @@ export function make_indicator(
     // These width calculations are tied to the spinner width and
     // margins defined via CSS
     if (width !== undefined) {
-        $container.css({width: width + text_width});
+        $container.css({width: `${(width + text_width) / legacy_em_in_px}em`});
     } else {
-        $container.css({width: 38 + text_width});
+        $container.css({width: `${(38 + text_width) / legacy_em_in_px}em`});
     }
     if (height !== undefined) {
         $container.css({height});

web/styles/app_components.css

@@ -469,9 +469,9 @@ input.settings_text_input {
 /* Standard loading indicators generated by the loading.ts API */
 .loading_indicator_spinner {
     /* If you change these, make sure to adjust the constants in
-       loading.make_indicator as well */
-    height: 38px;
-    width: 38px;
+       loading.make_indicator as well. 38px at 14px/1em */
+    height: 2.7143em;
+    width: 2.7143em;
     float: left;
 }
 

web/styles/zulip.css

@@ -1254,8 +1254,10 @@ nav {
 
 #page_loading_indicator_box {
     position: relative;
-    left: -50%;
-    top: -43px;
+    /* 50% of 38px = 19px at 14px/1em */
+    left: -1.3571em;
+    /* -43px at 14px/1em */
+    top: -3.0714em;
     z-index: 1;
     border-radius: 6px;
 }