Fixed DurationView wrapping

app/styles/DurationView.scss

@@ -1,30 +1,49 @@
+$durationInput-spacing: 1.0em;
+
 .durationInputs {
   display: flex;
+  // max-width: 100%;
+  justify-content: start;
   flex-wrap: wrap;
-  margin: -0.5em;
+  margin: -$durationInput-spacing / 2;
 
   &.inline {
-    min-width: 30em;
+    min-width: 20em;
+
+    .ui.input.durationInput {
+      >input {
+        width: 0 !important;
+      }
+    }
   }
 }
 
-$durationInput-inputWidth: 5em;
+$durationInput-inputWidth: 4em;
 $durationInput-labelWidth: 2.5em;
 
 .ui.form .field .ui.input.durationInput {
-  margin: 0.5em;
+  padding: $durationInput-spacing / 2;
 
-  flex: 1 0 ($durationInput-inputWidth + $durationInput-labelWidth);
+  max-width: 100%;
+  width: auto;
+  flex-basis: auto;
+  flex-shrink: 0;
+  flex-grow: 1;
 
   > input {
-    flex: 1 0 $durationInput-inputWidth;
     min-width: $durationInput-inputWidth;
-    width: 100%;
+    width: auto;
+    flex-basis: $durationInput-inputWidth;
+    flex-grow: 1;
+    flex-shrink: 0;
   }
 
   > .label {
+    min-width: $durationInput-labelWidth;
     width: $durationInput-labelWidth;
-    flex: 0 0 $durationInput-labelWidth;
+    flex: $durationInput-labelWidth;
+    flex-grow: 0;
+    flex-shrink: 0;
     text-align: center;
   }
 }

app/styles/SectionChooser.scss

@@ -1,5 +1,5 @@
 .sectionChooser {
   .ui.selection.dropdown {
-    min-width: 12em;
+    min-width: 14em;
   }
 }