Give more room while editing programs

client/pages/ProgramPage.tsx

@@ -21,6 +21,7 @@ import { ISprinklersDevice } from "@common/httpApi";
 import log from "@common/logger";
 import { Program, SprinklersDevice } from "@common/sprinklersRpc";
 import { action } from "mobx";
+import classNames = require("classnames");
 
 interface ProgramPageProps
   extends RouteComponentProps<{ deviceId: string; programId: string }> {
@@ -173,8 +174,10 @@ class ProgramPage extends React.Component<ProgramPageProps> {
 
     const { running, enabled, schedule, sequence } = program;
 
+    const className = classNames("programEditor", editing && "editing");
+
     return (
-      <Modal open onClose={this.close} className="programEditor">
+      <Modal open onClose={this.close} className={className}>
         <Modal.Header>{this.renderName(program)}</Modal.Header>
         <Modal.Content>
           <Form>

client/styles/DeviceView.scss

@@ -78,9 +78,15 @@ $connected-color: #13d213;
   color: green;
 }
 
-.ui.modal.programEditor > .header > .header.item .inline.fields {
+.ui.modal.programEditor {
+  &.editing > .content {
+    min-height: 80vh;
+  }
+
+  > .header > .header.item .inline.fields {
     margin-bottom: 0;
   }
+}
 
 .runSectionForm-runButton  {
   display: inline-block;