Merge pull request #32 from BloomBooks/BL14049_VertScroll

fix: Get rid of erroneous vertical scrollbar (BL-14049) (#32)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloompub-viewer",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "author": "Bloom Devs",
   "description": "Viewer for Bloom Digital books",
   "license": "MIT",

src/renderer/Viewer.tsx

@@ -28,7 +28,21 @@ export const Viewer: React.FunctionComponent<{ zipFilePath: string }> = (
     <div className="App">
       {htmPath && (
         <iframe
-          style={{ width: "100%", height: "100%", border: "none" }}
+          style={{
+            width: "100%",
+            height: "100%",
+            border: "none",
+            // For a reason I still don't understand, setting all heights to 100% gives us a vertical scrollbar.
+            // As far as I can tell, there is an electron bug causing it to add 4px to the height of the iframe.
+            // But the inspector says the iframe height is the same as its parent and content, as it should be.
+            // If you set the iframe height to `calc(100% - 4px)`, the scrollbar goes away, but the 4px white bar remains at the bottom.
+            // The following 5 lines work around this.
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
           src={iframeSource}
         />
       )}