diff --git a/frontend/components/Editor/Editor.js b/frontend/components/Editor/Editor.js
index 2e95eed0..dc0e0e6d 100644
--- a/frontend/components/Editor/Editor.js
+++ b/frontend/components/Editor/Editor.js
@@ -204,8 +204,10 @@ type KeyData = {
onSave={this.props.onSave}
readOnly={this.props.readOnly}
/>
- {!this.props.readOnly &&
- }
+
);
@@ -225,6 +227,7 @@ const HeaderContainer = styled(Flex).attrs({
align: 'flex-end',
})`
height: 100px;
+ flex-shrink: 0;
${({ readOnly }) => !readOnly && 'cursor: text;'}
`;
diff --git a/frontend/components/Editor/components/ClickablePadding/ClickablePadding.js b/frontend/components/Editor/components/ClickablePadding/ClickablePadding.js
index 970d0619..81e2b5f1 100644
--- a/frontend/components/Editor/components/ClickablePadding/ClickablePadding.js
+++ b/frontend/components/Editor/components/ClickablePadding/ClickablePadding.js
@@ -1,20 +1,22 @@
// @flow
import React from 'react';
-import classnames from 'classnames';
-import styles from './ClickablePadding.scss';
+import styled from 'styled-components';
type Props = {
- onClick: Function,
+ onClick?: ?Function,
grow?: boolean,
};
const ClickablePadding = (props: Props) => {
- return (
-
- );
+ return ;
};
+const Container = styled.div`
+ min-height: 150px;
+ padding-top: 50px;
+ cursor: ${({ onClick }) => (onClick ? 'text' : 'default')};
+
+ ${({ grow }) => grow && `flex-grow: 1;`}
+`;
+
export default ClickablePadding;
diff --git a/frontend/components/Editor/components/ClickablePadding/ClickablePadding.scss b/frontend/components/Editor/components/ClickablePadding/ClickablePadding.scss
deleted file mode 100644
index cac8ee5a..00000000
--- a/frontend/components/Editor/components/ClickablePadding/ClickablePadding.scss
+++ /dev/null
@@ -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;
- }
-}