Fixed padding and aligned for editor in readonly mode

frontend/components/Editor/Editor.js

@@ -204,8 +204,10 @@ type KeyData = {
             onSave={this.props.onSave}
             readOnly={this.props.readOnly}
           />
-          {!this.props.readOnly &&
+          <ClickablePadding
-            <ClickablePadding onClick={this.focusAtEnd} grow />}
+            onClick={!this.props.readOnly ? this.focusAtEnd : undefined}
+            grow
+          />
         </MaxWidth>
       </Flex>
     );
@@ -225,6 +227,7 @@ const HeaderContainer = styled(Flex).attrs({
   align: 'flex-end',
 })`
   height: 100px;
+  flex-shrink: 0;
   ${({ readOnly }) => !readOnly && 'cursor: text;'}
 `;
 

frontend/components/Editor/components/ClickablePadding/ClickablePadding.js

@@ -1,20 +1,22 @@
 // @flow
 import React from 'react';
-import classnames from 'classnames';
+import styled from 'styled-components';
-import styles from './ClickablePadding.scss';
 
 type Props = {
-  onClick: Function,
+  onClick?: ?Function,
   grow?: boolean,
 };
 
 const ClickablePadding = (props: Props) => {
-  return (
+  return <Container grow={props.grow} onClick={props.onClick} />;
-    <div
-      className={classnames(styles.container, { [styles.grow]: props.grow })}
-      onClick={props.onClick}
-    />
-  );
 };
 
+const Container = styled.div`
+  min-height: 150px;
+  padding-top: 50px;
+  cursor: ${({ onClick }) => (onClick ? 'text' : 'default')};
+
+  ${({ grow }) => grow && `flex-grow: 1;`}
+`;
+
 export default ClickablePadding;

frontend/components/Editor/components/ClickablePadding/ClickablePadding.scss

@@ -1,15 +0,0 @@
-.container {
-  min-height: 150px;
-  padding-top: 50px;
-  cursor: text;
-}
-
-.grow {
-  flex-grow: 1;
-}
-
-@media all and (max-width: 960px) {
-  .container {
-    padding-top: 50px;
-  }
-}