Use jQuery to simulate search-header to get width pre-render

desktop/head_tag.html

@@ -1,27 +1,16 @@
 <script type="text/discourse-plugin" version='0.8.9'>
 
-// from https://stackoverflow.com/questions/2707790/get-a-css-value-from-external-style-sheet-with-javascript-jquery
-function getStyleSheetPropertyValue(selectorText, propertyName) {
-  // search backwards because the last match is more likely the right one
-  for (var s= document.styleSheets.length - 1; s >= 0; s--) {
-    var cssRules = document.styleSheets[s].cssRules ||
-            document.styleSheets[s].rules || []; // IE support
-    for (var c=0; c < cssRules.length; c++) {
-      if (cssRules[c].selectorText === selectorText)
-        return cssRules[c].style[propertyName];
-    }
-  }
-  return null;
-}
-
 const SiteHeader = require('discourse/components/site-header').default;
 SiteHeader.reopen({
   toggleVisibility: function(topicToggled) {
     const headerWidth = this.$('.d-header .contents').width();
     const panelWidth = this.$('.d-header .panel').width();
     const logoWidth = this.$('.d-header .title a').width();
-    const searchWidthStr = getStyleSheetPropertyValue('.search-header', 'width');
-    const searchWidth = searchWidthStr ? parseInt(searchWidthStr) : 600; // needs a backup
+
+    const $searchHeader = $('<div class="search-header"/>').hide().appendTo("body");
+    const searchWidth = parseInt($searchHeader.css("width"));
+    $searchHeader.remove();
+
     const showHeaderSearch = headerWidth > (panelWidth + logoWidth + searchWidth + 30); // 30 is a buffer
     const appController = api.container.lookup('controller:application');
     const currentState = appController.get('showHeaderSearch');