From f4d3e156a7556a03bc6194cbeb3800838b7dc58f Mon Sep 17 00:00:00 2001
From: Isa Herico Velasco <7840857+iisa@users.noreply.github.com>
Date: Wed, 26 Jan 2022 17:12:58 -0800
Subject: [PATCH] Shady dom css shifts (#919)

---
 BookReaderDemo/demo-internetarchive.html |  5 +++++
 package-lock.json                        | 12 +++++------
 package.json                             |  2 +-
 src/BookNavigator/book-navigator.js      |  1 +
 src/ia-bookreader/ia-bookreader.js       | 27 ++++++++++++------------
 5 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/BookReaderDemo/demo-internetarchive.html b/BookReaderDemo/demo-internetarchive.html
index 868a5ca11..68eeebfb2 100644
--- a/BookReaderDemo/demo-internetarchive.html
+++ b/BookReaderDemo/demo-internetarchive.html
@@ -7,6 +7,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <!-- WC dependencies -->
+    <script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2Ces5%2CglobalThis"></script>
+    <script type="text/javascript" src="https://unpkg.com/lit@2.1.2/polyfill-support.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-bundle.js"></script>
+
     <!-- JS dependencies -->
     <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
diff --git a/package-lock.json b/package-lock.json
index a836f9fb0..28786ff7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4467,9 +4467,9 @@
       "dev": true
     },
     "@internetarchive/field-parsers": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@internetarchive/field-parsers/-/field-parsers-0.1.0.tgz",
-      "integrity": "sha512-6ByLemKZvCMJrDglC1Om5bkTT7pB/5Lq0uKkGzb4sO88+lTDy6pqbGGw6VGEe6gAYgyDKiTlNUyUoTzF5brq3Q=="
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@internetarchive/field-parsers/-/field-parsers-0.1.1.tgz",
+      "integrity": "sha512-yPkH/m1a15V0tnewQutK3RQJgSwe9RoMdTuzgUxGgZtDXX8Tw+MFcvTpvZQjEo3ZgyL9sNLr2Lv+KiSAsZ9OOg=="
     },
     "@internetarchive/ia-activity-indicator": {
       "version": "0.0.1",
@@ -4481,9 +4481,9 @@
       }
     },
     "@internetarchive/ia-item-navigator": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@internetarchive/ia-item-navigator/-/ia-item-navigator-0.0.4.tgz",
-      "integrity": "sha512-O2CkSQ4TI3GAyEtY7JZW4p+BOd3oYg633h9z6P9EXS2fE1C0wKT72+LTZ9ZQU0R0VGZguYm9yhbc3hdAisyMiA==",
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@internetarchive/ia-item-navigator/-/ia-item-navigator-0.0.5.tgz",
+      "integrity": "sha512-/MV5/zKj6bVFiaJgWtcjlJVuzrYrYcV0xAyVm91878FP4SjuUMvJi3dp/ts/MsoLqae6rUbZBwIaHNE+gOzeEg==",
       "requires": {
         "@internetarchive/ia-menu-slider": "^1.1.2",
         "@internetarchive/ia-sharing-options": "^0.1.4",
diff --git a/package.json b/package.json
index c01f6213d..c9875fdd6 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
   "private": false,
   "dependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.1",
-    "@internetarchive/ia-item-navigator": "^0.0.4",
+    "@internetarchive/ia-item-navigator": "0.0.5",
     "@internetarchive/ia-menu-slider": "^1.1.1",
     "@internetarchive/ia-sharing-options": "^0.1.4",
     "@internetarchive/icon-bookmark": "^1.1.3",
diff --git a/src/BookNavigator/book-navigator.js b/src/BookNavigator/book-navigator.js
index 902bcf931..39f143425 100644
--- a/src/BookNavigator/book-navigator.js
+++ b/src/BookNavigator/book-navigator.js
@@ -517,6 +517,7 @@ export class BookNavigator extends LitElement {
     slot > * {
       display: block;
       height: inherit;
+      width: inherit;
     }
     .cover-img {
       max-height: 300px;
diff --git a/src/ia-bookreader/ia-bookreader.js b/src/ia-bookreader/ia-bookreader.js
index ae05f35ec..2b04284a4 100644
--- a/src/ia-bookreader/ia-bookreader.js
+++ b/src/ia-bookreader/ia-bookreader.js
@@ -105,7 +105,7 @@ export class IaBookReader extends LitElement {
 
   render() {
     return html`
-      <div class="ia-bookreader">
+      <div class="main-component">
         <ia-item-navigator
           ?viewportInFullscreen=${this.fullscreen}
           .basehost=${this.baseHost}
@@ -148,8 +148,6 @@ export class IaBookReader extends LitElement {
     return css`
       :host {
         display: block;
-        height: inherit;
-        min-height: inherit;
         --primaryBGColor: var(--black, #000);
         --secondaryBGColor: #222;
         --tertiaryBGColor: #333;
@@ -160,6 +158,8 @@ export class IaBookReader extends LitElement {
         --secondaryCTABorder: #999;
         --primaryErrorCTAFill: #e51c26;
         --primaryErrorCTABorder: #f8c6c8;
+        background-color: var(--primaryBGColor);
+        position: relative;
       }
 
       :host([fullscreen]),
@@ -170,20 +170,21 @@ export class IaBookReader extends LitElement {
         min-height: unset;
       }
 
-      div[slot="main"],
-      div[slot="main"] > * {
-        height: inherit;
+      .main-component {
+        height: 100%;
+        width: 100%;
+        min-height: inherit;
       }
 
-      slot {
-        display: block;
+      div[slot="header"],
+      div[slot="main"] {
+        display: flex;
+        width: 100%;
       }
 
-      .ia-bookreader {
-        background-color: var(--primaryBGColor);
-        position: relative;
-        min-height: inherit;
-        height: inherit;
+      slot {
+        display: block;
+        flex: 1;
       }
 
       ia-item-navigator {