Fix overlay styling (#1160)

This PR fixes a couple bugs in the styling of the search overlay where the height and width styling did not have the correct units and were therefore invalid values and not being applied.

In cases where the overlay loaded quickly and the default height and width were applied to the overlay button before the label text was added, the button would remain that smaller default size and hide the label text because the computed height and width were missing the `px` units. In the cases where the label text was added before the overlay button finished loading and having its styling applied, the label text would be correctly visible even without this change, which is why it seemed mostly functional so far.

I also noticed another place where `px` units were being added to a `100vh` height value, which would make it invalid. I wasn't able to find a scenario in which this was causing issues for the account from the techops, but other implementations could be affected depending on their setup.

J=TECHOPS-10727
TEST=manual

Make these changes in the account from the techops and see the overlay styling is fixed and the label text is correctly displayed in the instances where it previously was hidden.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "answers-hitchhiker-theme",
-  "version": "1.33.2",
+  "version": "1.33.3",
   "description": "A starter Search theme for hitchhikers",
   "keywords": [
     "jambo",

static/js/overlay/parent-frame/dom/stylist.js

@@ -83,9 +83,9 @@ export default class Stylist {
     this._iframeWrapperEl.style['opacity'] = '1';
     this._iframeWrapperEl.style['transition'] = `opacity ${AnimationStyling.TRANSITION_TIMING}`;
     this._iframeWrapperEl.style['width'] = this._currentWidth;
-    this._iframeWrapperEl.style['height'] = `${isTaller
+    this._iframeWrapperEl.style['height'] = isTaller
       ? AnimationStyling.CONTAINER_HEIGHT_TALLER
-      : this._minHeight}px`;
+      : `${this._minHeight}px`;
 
     this._overlayContainerEl.style['transition'] =
       `box-shadow ${AnimationStyling.TRANSITION_TIMING}`;
@@ -152,8 +152,8 @@ export default class Stylist {
     this._buttonHeight = height;
     this._buttonWidth = Math.min(AnimationStyling.MAX_BUTTON_WIDTH, width);
 
-    this._buttonFrameEl.style['width'] = this._buttonWidth;
-    this._buttonFrameEl.style['height'] = this._buttonHeight;
+    this._buttonFrameEl.style['width'] = `${this._buttonWidth}px`;
+    this._buttonFrameEl.style['height'] = `${this._buttonHeight}px`;
   }
 
   /**

static/package.json

@@ -1,6 +1,6 @@
 {
   "name": "answers-hitchhiker-theme",
-  "version": "1.33.2",
+  "version": "1.33.3",
   "description": "Toolchain for use with the HH Theme",
   "main": "Gruntfile.js",
   "scripts": {