diff --git a/web/src/loading.ts b/web/src/loading.ts index cf9173cf01..50042992ec 100644 --- a/web/src/loading.ts +++ b/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}); diff --git a/web/styles/app_components.css b/web/styles/app_components.css index 7535ab131b..0d1a5c53d7 100644 --- a/web/styles/app_components.css +++ b/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; } diff --git a/web/styles/zulip.css b/web/styles/zulip.css index 5111357d16..543216fb4d 100644 --- a/web/styles/zulip.css +++ b/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; }