Fix: Zoom enlarged by default

src/components/PreviewFrame.jsx

@@ -7,7 +7,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import {CompiledProject as CompiledProjectRecord} from '../records';
-import bowser from '../services/bowser';
+import bowser, { innerWidth } from '../services/bowser';
 import {sourceDelimiter} from '../util/compileProject';
 import {createError} from '../util/errorUtils';
 import retryingFailedImports from '../util/retryingFailedImports';
@@ -30,6 +30,13 @@ class PreviewFrame extends React.Component {
       compiledProject: {source},
     } = props;
 
+    const isWindowSmall = innerWidth < 1366;
+    const increaseIFrameBodyFont = `<style>
+    body {
+       font-size: 1.5em;
+    }
+    </style>`;
+
     bindAll(this, '_attachToFrame', '_handleInfiniteLoop');
 
     this.render = constant(
@@ -39,7 +46,7 @@ class PreviewFrame extends React.Component {
           name={`preview-frame-${nextId++}`}
           ref={this._attachToFrame}
           sandbox={sandboxOptions}
-          srcDoc={source}
+          srcDoc={source + (isWindowSmall ? increaseIFrameBodyFont : "")}
         />
       </div>,
     );

src/components/ProjectPreview.jsx

@@ -27,7 +27,7 @@ export default function ProjectPreview({
         {preview.slice(0, MAX_LENGTH)}
         {!isNil(project.updatedAt) && (
           <div className="project-preview__timestamp">
-            {moment(project.updatedAt).fromNow()}
+            {moment(project.updatedAt).fromNow() || '\b'}
           </div>
         )}
       </div>

src/css/application.css

@@ -582,6 +582,12 @@ body {
   font-size: 14px;
 }
 
+@media only screen and (max-width: 1366px) {
+  .editors {
+    font-size: 18px;
+  }
+}
+
 .editors__editor-container {
   box-sizing: border-box;
   position: relative;

src/services/bowser.js

@@ -1,3 +1,3 @@
 import Bowser from 'bowser';
-
 export default Bowser.getParser(window.navigator.userAgent);
+export const innerWidth = window.innerWidth;

src/util/compileProject.js

@@ -199,7 +199,7 @@ export async function addJavascript(doc, {sources: {javascript}}, opts) {
 
 export function generateTextPreview(project) {
   const {title} = constructDocument(project);
-  return (title || '').trim();
+  return (title || '\b').trim();
 }
 
 export default async function compileProject(project, {isInlinePreview} = {}) {