From 1eff9b4267005cda5309d4e5415b68db23c6391b Mon Sep 17 00:00:00 2001
From: Alex Mikhalev <alexmikhalevalex@gmail.com>
Date: Wed, 25 Jul 2018 17:40:06 -0600
Subject: [PATCH] Fixed DurationView wrapping

---
 app/styles/DurationView.scss   | 35 ++++++++++++++++++++++++++--------
 app/styles/SectionChooser.scss |  2 +-
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/app/styles/DurationView.scss b/app/styles/DurationView.scss
index 3abd627..0a2d838 100644
--- a/app/styles/DurationView.scss
+++ b/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;
   }
 }
diff --git a/app/styles/SectionChooser.scss b/app/styles/SectionChooser.scss
index 3bf3788..8f95232 100644
--- a/app/styles/SectionChooser.scss
+++ b/app/styles/SectionChooser.scss
@@ -1,5 +1,5 @@
 .sectionChooser {
   .ui.selection.dropdown {
-    min-width: 12em;
+    min-width: 14em;
   }
 }