Make Scroller 100% width

ebigram · Mar 19, 2019 · 86f8a4c · 86f8a4c
1 parent f0af986
commit 86f8a4c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/src/scroller.js b/src/scroller.js
@@ -145,7 +145,11 @@ export default function Scroller({
 
   return (
     <div
-      style={{ height: "100%", overflowY: "auto", overflowX: "hidden" }}
+      style={{
+        height: "100%",
+        overflowY: "auto",
+        overflowX: "hidden"
+      }}
       className="scroller"
       ref={ref}
       onScroll={e => {
@@ -155,8 +159,20 @@ export default function Scroller({
         }
         dispatch({ type: "manual-scroll", newTop });
       }}
-      children={children}
-    />
+    >
+      <code
+        style={{
+          display: "block",
+          width: "calc(100% - 20px)",
+          maxWidth: "900px",
+          margin: "auto",
+          padding: "10px",
+          boxSizing: "border-box",
+          height: "100%"
+        }}
+        children={children}
+      />
+    </div>
   );
 }
 

diff --git a/src/slide.js b/src/slide.js
@@ -49,25 +49,13 @@ function Slide({ lines, styles, changes }) {
         boxSizing: "border-box"
       }}
     >
-      <code
-        style={{
-          display: "block",
-          width: "calc(100% - 20px)",
-          maxWidth: "900px",
-          margin: "auto",
-          padding: "10px",
-          height: "100%",
-          boxSizing: "border-box"
-        }}
-      >
-        <Scroller
-          items={lines}
-          getRow={getLine}
-          getRowHeight={getLineHeight}
-          data={{ styles }}
-          snapAreas={changes}
-        />
-      </code>
+      <Scroller
+        items={lines}
+        getRow={getLine}
+        getRowHeight={getLineHeight}
+        data={{ styles }}
+        snapAreas={changes}
+      />
     </pre>
   );
 }