Fix viewport overflow issues

src/Frame.tsx

@@ -3,11 +3,12 @@ import * as React from 'react';
 export interface FrameProps {
   offset: number;
   width: number;
+  height: number;
 }
 
 export const Frame: React.FunctionComponent<FrameProps> = (props) => {
   return (
-    <svg x={props.offset * props.width}>
+    <svg x={props.offset * props.width} width={props.width} viewBox={`0 0 ${props.width} ${props.height}`}>
       <use xlinkHref="#a"/>
       {props.children}
     </svg>

src/Word.tsx

@@ -28,7 +28,7 @@ export const Word: React.FunctionComponent<WordProps> = props => {
           height={props.theme.fontSize * props.theme.lineHeight}
           inverse={props.inverse}
           width={props.children.length > 0 ? props.children.length : 0}
-          x={props.x * props.theme.fontSize * 0.6}
+          x={props.x}
           y={props.y - props.theme.fontSize}
         />
       )}
@@ -39,7 +39,7 @@ export const Word: React.FunctionComponent<WordProps> = props => {
         inverse={props.inverse}
         theme={props.theme}
         underline={props.underline}
-        x={props.x * props.theme.fontSize * 0.6}
+        x={props.x}
         y={props.y}
       >
         {props.children}

src/load-cast.ts

@@ -11,7 +11,7 @@ export function loadCast(input: string, options: LoadOptions = {}): Cast {
   const { width, height, idle, fps } = options;
   return load(input, {
     width,
-    height: height ? height + 1 : undefined,
+    height,
     idle: idle ? idle / 1000 : undefined,
     fps
   });

src/render.tsx

@@ -48,7 +48,6 @@ export function render(
       paddingY={paddingY}
       decorations={decorations}
       cursor={cursor}
-      height={options.height}
     />
   );
 }

src/svg-term.tsx

@@ -17,7 +17,6 @@ export interface SvgTermProps {
   theme: Theme;
   paddingX: number;
   paddingY: number;
-  height?: number;
   decorations: boolean;
   from?: number;
   to?: number;
@@ -35,7 +34,6 @@ export const SvgTerm: React.FunctionComponent<SvgTermProps> = props => {
   const data = toViewModel({
     cast: props.cast,
     cursor: props.cursor,
-    height: props.height,
     theme: props.theme,
     from: from(bound),
     to: to(bound)
@@ -44,14 +42,14 @@ export const SvgTerm: React.FunctionComponent<SvgTermProps> = props => {
   return (
     <Window
       decorations={props.decorations}
-      width={data.width}
+      width={data.displayWidth}
       height={data.displayHeight}
       background={props.theme.background}
       paddingX={props.paddingX}
       paddingY={props.paddingY}
     >
       <Document
-        width={data.width}
+        width={data.displayWidth}
         height={data.displayHeight}
         x={props.decorations ? 15 + props.paddingX : props.paddingX}
         y={props.decorations ? 50 + props.paddingY : props.paddingY}
@@ -69,7 +67,7 @@ export const SvgTerm: React.FunctionComponent<SvgTermProps> = props => {
             theme={props.theme}
           />
           <Background
-            width={data.width}
+            width={data.displayWidth}
             height={data.displayHeight}
             fill={props.theme.background}
           />
@@ -81,7 +79,7 @@ export const SvgTerm: React.FunctionComponent<SvgTermProps> = props => {
           >
             {data.frames.map((frame: any, index: number) => {
               return (
-                <Frame key={frame.stamp} offset={index} width={data.width}>
+                <Frame key={frame.stamp} offset={index} width={data.displayWidth} height={data.displayHeight}>
                   {frame.cursor.visible && (
                     <use
                       xlinkHref="#b"

src/to-view-model.ts

@@ -10,7 +10,6 @@ export interface ViewModelOptions {
   from: number;
   to: number;
   theme: Theme;
-  height?: number;
 }
 
 export interface ViewModel {
@@ -51,7 +50,6 @@ export function toViewModel(options: ViewModelOptions): ViewModel {
     .map(([stamp]) => stamp - from);
   const fontSize = theme.fontSize;
   const lineHeight = theme.lineHeight;
-  const height = typeof options.height === 'number' ? options.height : cast.height;
 
   const frames = loadedFrames
     .filter(([stamp]) => stamp >= from && stamp <= to)
@@ -108,7 +106,7 @@ export function toViewModel(options: ViewModelOptions): ViewModel {
     width: cast.width,
     displayWidth: cast.width,
     height: cast.height,
-    displayHeight: height * fontSize * lineHeight,
+    displayHeight: cast.height * fontSize * lineHeight,
     duration: to - from,
     registry,
     stamps,