Minor UI improvements

app/components/App.tsx

@@ -17,11 +17,11 @@ function NavContainer() {
         <Container className="app">
             <NavBar/>
 
-            <Route path={rp.device(":deviceId")} component={p.DevicePage}/>
+            <Switch>
-            <Route path={rp.messagesTest} component={p.MessagesTestPage}/>
+                <Route path={rp.device(":deviceId")} component={p.DevicePage}/>
-            {/*<Switch>*/}
+                <Route path={rp.messagesTest} component={p.MessagesTestPage}/>
-                {/*<Redirect to="/"/>*/}
+                <Redirect to="/"/>
-            {/*</Switch>*/}
+            </Switch>
 
             <MessagesView/>
         </Container>

app/components/DeviceView.scss

@@ -6,13 +6,7 @@
       flex-direction: row;
     }
   }
-  .ui.stackable.grid.in-container > .row > .column {
+  .ui.grid {
-    @media only screen and (max-width: 991px) {
-      padding-left: 0 !important;
-      padding-right: 0 !important;
-    }
-  }
-  .ui.stackable.grid.in-container {
     margin-top: 0;
   }
   .connectionState {
@@ -46,22 +40,32 @@
   width: 20em;
 }
 
+.sectionChooser {
+  .ui.selection.dropdown {
+    min-width: 12em;
+  }
+}
+
 .durationInputs {
   display: flex;
+  flex-wrap: wrap;
+  margin: -0.5em;
 }
 
 $durationInput-labelWidth: 2.5em;
 
 .ui.form .field .ui.input.durationInput {
+  margin: 0.5em;
+
   &.minutes {
-    margin-right: 1em;
+    //margin-right: 1em;
   }
   &.seconds {
 
   }
 
   > input {
-    flex: 1 1 6em;
+    flex: 1 0 6em;
     width: 100%;
   }
 

app/components/DeviceView.tsx

@@ -54,12 +54,14 @@ class DeviceView extends React.Component<DeviceViewProps & RouteComponentProps<a
         const { id, connectionState, sections, sectionRunner } = device;
         const deviceBody = connectionState.isAvailable && (
             <React.Fragment>
-                <SectionRunnerView sectionRunner={sectionRunner} sections={sections}/>
                 <Grid>
-                    <Grid.Column mobile="16" tablet="16" computer="8">
+                    <Grid.Column mobile="16" tablet="16" computer="16" largeScreen="6">
+                        <SectionRunnerView sectionRunner={sectionRunner} sections={sections}/>
+                    </Grid.Column>
+                    <Grid.Column mobile="16" tablet="9" computer="9" largeScreen="6">
                         <SectionTable sections={sections}/>
                     </Grid.Column>
-                    <Grid.Column mobile="16" tablet="16" computer="8">
+                    <Grid.Column mobile="16" tablet="7" computer="7" largeScreen="4">
                         <RunSectionForm device={device} uiStore={uiStore}/>
                     </Grid.Column>
                 </Grid>

app/components/ProgramTable.tsx

@@ -33,7 +33,7 @@ class ProgramRows extends React.Component<{
                 </Table.Cell>
                 <Table.Cell>
                     <Button onClick={this.cancelOrRun} {...buttonStyle} positive={!running} negative={running}>
-                        {running ? "Cancel" : "Run"}
+                        {running ? "Stop" : "Run"}
                     </Button>
                     <Button as={Link} to={detailUrl} {...buttonStyle} primary>
                         Open

app/components/SectionChooser.tsx

@@ -23,6 +23,7 @@ export default class SectionChooser extends React.Component<{
         }
         return (
             <Form.Select
+                className="sectionChooser"
                 label={label}
                 inline={inline}
                 placeholder="Section"

app/components/SectionRunnerView.tsx

@@ -109,7 +109,7 @@ class SectionRunView extends React.Component<{
             <Segment className="sectionRun">
                 <div className="flex-horizontal-space-between">
                     {description}
-                    <Button onClick={cancel} icon size="mini"><Icon name="remove"/></Button>
+                    <Button negative onClick={cancel} icon size="mini"><Icon name="remove"/></Button>
                 </div>
                 {progressBar}
             </Segment>

app/pages/ProgramPage.tsx

@@ -81,7 +81,7 @@ class ProgramPage extends React.Component<{
         return (
             <Modal.Actions>
                 <Button positive={!running} negative={running} onClick={this.cancelOrRun}>
-                    {running ? "Cancel" : "Run"}
+                    {running ? "Stop" : "Run"}
                 </Button>
                 {editButtons}
                 <Button onClick={this.close}>