Misc modal style fixes
MODIFY
app/components/Settings/scheduler/create-modal.css
app/components/Settings/scheduler/create-modal.css
width: 80%;
}
-.create-modal .row-body pre {
+.create-modal .row-body > pre {
margin-top: 5px;
+ overflow-y: auto;
+ max-height: 300px;
}

MODIFY
app/components/Settings/scheduler/create-modal.jsx
app/components/Settings/scheduler/create-modal.jsx
@@ -123,7 +123,7 @@ class CreateModal extends Component {
render() {
return (
<Modal open={this.props.open} onClickAway={this.props.onClickAway} className="scheduler create-modal">
- <Column className="container" style={{width: '60%', maxHeight: '100vh', minWidth: 640}}>
+ <Column className="container" style={{width: '60%', maxHeight: '100vh', minWidth: 640, paddingBottom: '16px'}}>
<Row>
<Column className="innerColumn">
<h5 className="header">Create Scheduled Query</h5>

MODIFY
app/components/Settings/scheduler/preview-modal.jsx
app/components/Settings/scheduler/preview-modal.jsx
@@ -207,11 +207,12 @@ export class PreviewModal extends Component {
const initialModeId = getInitialCronMode(props.query);
content = (
- <Column style={{width: '60%', maxHeight: '100vh', minWidth: 640, background: 'white'}}>
+ <Column style={{width: '60%', maxHeight: '100vh', minWidth: 640, background: 'white', paddingTop: 16}}>
+ { editing && <Row style={{ padding: '0 32px', justifyContent: 'flex-start', fontSize: 12, marginTop: 8, fontWeight: 600, opacity: 0.4, letterSpacing: '0.5px' }}>EDITING</Row> }
<Row
className="sql-preview"
style={{
- padding: '16px 32px',
+ padding: '0 32px 16px',
position: 'relative',
justifyContent: 'flex-start'
}}
@@ -234,9 +235,9 @@ export class PreviewModal extends Component {
<Column style={{background: '#F5F7FB', padding: '16px 32px'}}>
<Row style={rowStyle}>
<div style={keyStyle}>Query</div>
- <div className="sql-preview scheduler" style={{...valueStyle, overflowY: 'auto'}}>
+ <div className="sql-preview scheduler" style={{...valueStyle, overflowY: 'auto', maxHeight: 300}}>
{editing ? (
- <div>
+ <div style={{ width: '99%' }}>
<CodeMirror
options={{
lineNumbers: true,
@@ -323,7 +324,7 @@ export class PreviewModal extends Component {
justifyContent: 'space-between',
border: 'none',
marginTop: 48,
- paddingBottom: 0
+ paddingBottom: 16
}}
>
{this.renderButtonRow()}

MODIFY
app/components/Settings/scheduler/scheduler.css
app/components/Settings/scheduler/scheduler.css
}
.meta-preview button {
- min-height: 28px;
+ min-height: 21px;
}

Misc modal style fixes