fix comic book viewer styles: #4035

static/app-strings.json

@@ -1191,5 +1191,6 @@
   "There are no stats for this channel. Make sure you are signed in with the correct email and have data sharing turned on.": "There are no stats for this channel. Make sure you are signed in with the correct email and have data sharing turned on.",
   "%follower_count% followers": "%follower_count% followers",
   "%lbc_received% LBC Earned": "%lbc_received% LBC Earned",
-  "Earnings may also include any LBC you've sent yourself or added as support. We are working on making this more accurate. Check your wallet page for the correct total balance.": "Earnings may also include any LBC you've sent yourself or added as support. We are working on making this more accurate. Check your wallet page for the correct total balance."
+  "Earnings may also include any LBC you've sent yourself or added as support. We are working on making this more accurate. Check your wallet page for the correct total balance.": "Earnings may also include any LBC you've sent yourself or added as support. We are working on making this more accurate. Check your wallet page for the correct total balance.",
+  "Sign Up": "Sign Up"
 }

ui/component/viewers/comicBookViewer.jsx

@@ -28,7 +28,11 @@ class ComicBookViewer extends React.PureComponent<Props> {
       allowGlobalShortcuts: true,
     };
 
-    return <Villain source={file} style={{ width: '100%', height: '100%' }} options={opts} workerUrl={workerUrl} />;
+    return (
+      <div className="file-render__viewer  file-render__viewer--comic">
+        <Villain source={file} className={'comic-viewer'} options={opts} workerUrl={workerUrl} />
+      </div>
+    );
   }
 }
 

ui/scss/component/_file-render.scss

@@ -98,6 +98,16 @@
   }
 }
 
+.file-render__viewer--comic {
+  position: relative;
+  overflow: hidden;
+  .comic-viewer {
+    width: 100%;
+    height: calc(100vh - var(--header-height) - var(--spacing-medium) * 2);
+    max-height: var(--inline-player-max-height);
+  }
+}
+
 .file-render__viewer--iframe {
   display: flex; /*this eliminates extra height from whitespace, if someone edits this with a better technique, tell Jeremy*/
   /*

yarn.lock

@@ -1735,13 +1735,6 @@ babel-plugin-transform-object-rest-spread@^6.26.0:
     babel-plugin-syntax-object-rest-spread "^6.8.0"
     babel-runtime "^6.26.0"
 
-babel-plugin-transform-xregexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-xregexp/-/babel-plugin-transform-xregexp-1.0.0.tgz#0e709c99e94bd096ccf6ea706f03131501d10440"
-  dependencies:
-    babel-runtime "^6.23.0"
-    xregexp "^4.1.1"
-
 babel-polyfill@^6.2.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
@@ -1750,7 +1743,7 @@ babel-polyfill@^6.2.0:
     core-js "^2.5.0"
     regenerator-runtime "^0.10.5"
 
-babel-runtime@6.x, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.3.19:
+babel-runtime@6.x, babel-runtime@^6.26.0, babel-runtime@^6.3.19:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -7308,9 +7301,10 @@ opener@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
 
-openseadragon@^2.4.1:
+openseadragon@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/openseadragon/-/openseadragon-2.4.2.tgz#f25d833d0ab9941599d65a3e2b44bec546c9f15c"
+  integrity sha512-398KbZwRtOYA6OmeWRY4Q0737NTacQ9Q6whmr9Lp1MNQO3p0eBz5LIASRne+4gwequcSM1vcHcjfy3dIndQziw==
 
 opn@^5.5.0:
   version "5.5.0"
@@ -8574,9 +8568,10 @@ react-async-script@^1.1.1:
     hoist-non-react-statics "^3.3.0"
     prop-types "^15.5.0"
 
-react-compound-slider@^2.3.0:
+react-compound-slider@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-compound-slider/-/react-compound-slider-2.5.0.tgz#99771a3397f4ab00aa2a37f8410da87e6ca2449b"
+  integrity sha512-T84FtSI0bkQPmH5GaaHbL+2McOyIR6M5sqS80dqw/bHc5r2UKLYY64BWTbsL+XO0jlx7REuJJnZUBqo4eSRl7g==
   dependencies:
     "@babel/runtime" "^7.7.7"
     d3-array "^1.2.4"
@@ -10885,17 +10880,17 @@ videojs-vtt.js@^0.14.1:
   dependencies:
     global "^4.3.1"
 
-villain-react@^1.0.6:
+villain-react@^1.0.9:
-  version "1.0.8"
+  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/villain-react/-/villain-react-1.0.8.tgz#70f2f372eb9c37c7456eb2c1ae466f5c8454479a"
+  resolved "https://registry.yarnpkg.com/villain-react/-/villain-react-1.0.9.tgz#9da106d3e1cc863f9fa1aedd8f06cdd0b92758b3"
+  integrity sha512-GqQZDB/zAB5TZ1C2HEfh4qyqLh6DYSJQj7HN2MgCWqdGoxeKE19vugNSg1pFD8yOZ9ci7W+bIlvWGNvZQ6dXyA==
   dependencies:
-    babel-plugin-transform-xregexp "^1.0.0"
     clsx "^1.0.4"
     libarchive.js "^1.3.0"
     memoize-one "^5.1.1"
-    openseadragon "^2.4.1"
+    openseadragon "^2.4.2"
     prop-types "^15.7.2"
-    react-compound-slider "^2.3.0"
+    react-compound-slider "^2.5.0"
     react-localization "^1.0.15"
     react-spring "^8.0.27"
 
@@ -11252,7 +11247,7 @@ xregexp@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-3.1.0.tgz#14d8461e0bdd38224bfee5039a0898fc42fcd336"
 
-xregexp@^4.1.1, xregexp@^4.3.0:
+xregexp@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.3.0.tgz#7e92e73d9174a99a59743f67a4ce879a04b5ae50"
   dependencies: