From 1d6951a7ce730ad1f3b8de7f4915c0feceeab80a Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 24 May 2017 10:04:39 -0700
Subject: [PATCH 1/5] Adjust markup and styles so that the Quick, Relative, and
 Absolute layouts all occupy the same bounds, so the content doesn't jump
 around as you switch modes..

---
 .../angular-bootstrap/datepicker/day.html     |   2 +-
 .../angular-bootstrap/datepicker/month.html   |   2 +-
 .../angular-bootstrap/datepicker/year.html    |   2 +-
 .../kbn_timepicker_absolute_panel.html        |  96 ++++----
 .../kbn_timepicker_quick_panel.html           |   2 +-
 .../kbn_timepicker_relative_panel.html        | 220 ++++++++++--------
 src/ui/public/timepicker/timepicker.less      |  12 +
 7 files changed, 192 insertions(+), 144 deletions(-)

diff --git a/src/ui/public/angular-bootstrap/datepicker/day.html b/src/ui/public/angular-bootstrap/datepicker/day.html
index 4d2bb57ffb0ae..4912427ea0b70 100755
--- a/src/ui/public/angular-bootstrap/datepicker/day.html
+++ b/src/ui/public/angular-bootstrap/datepicker/day.html
@@ -1,5 +1,5 @@
 <table
-  class="kuiDatePicker"
+  class="kuiDatePicker fullWidth"
   role="grid"
   aria-labelledby="{{uniqueId}}-title"
   aria-activedescendant="{{activeDateId}}"
diff --git a/src/ui/public/angular-bootstrap/datepicker/month.html b/src/ui/public/angular-bootstrap/datepicker/month.html
index 165708ece3082..5dbc689701673 100755
--- a/src/ui/public/angular-bootstrap/datepicker/month.html
+++ b/src/ui/public/angular-bootstrap/datepicker/month.html
@@ -1,5 +1,5 @@
 <table
-  class="kuiDatePicker"
+  class="kuiDatePicker fullWidth"
   role="grid"
   aria-labelledby="{{uniqueId}}-title"
   aria-activedescendant="{{activeDateId}}"
diff --git a/src/ui/public/angular-bootstrap/datepicker/year.html b/src/ui/public/angular-bootstrap/datepicker/year.html
index 4d37a0d9e13c3..c7903cbbaa8f9 100755
--- a/src/ui/public/angular-bootstrap/datepicker/year.html
+++ b/src/ui/public/angular-bootstrap/datepicker/year.html
@@ -1,5 +1,5 @@
 <table
-  class="kuiDatePicker"
+  class="kuiDatePicker fullWidth"
   role="grid"
   aria-labelledby="{{uniqueId}}-title"
   aria-activedescendant="{{activeDateId}}"
diff --git a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
index 0817ab6645aba..d6a693993a8b9 100644
--- a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
+++ b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
@@ -1,53 +1,65 @@
 <form name="absoluteTime" ng-submit="applyAbsolute()">
-  <div class="kbn-timepicker-section">
-    <div>
-      <label class="small">From: <span ng-show="!absolute.from"><em>Invalid Date</em></span>
-        <a
-          class="label label-default"
-          ng-click="setToNow({key:'from'})"
-          kbn-accessible-click
-        >
-          Set To Now
-        </a>
-      </label>
+  <div class="kbn-timepicker-body">
+    <div class="kbn-timepicker-section kbn-timepicker-body-column">
+      <div class="kuiLocalDropdownHeader kbn-timepicker-form-header">
+        <label class="kuiLocalDropdownHeader__label">
+          From
+        </label>
+
+        <div class="kuiLocalDropdownHeader__actions">
+          <a
+            class="kuiLocalDropdownHeader__action"
+            ng-click="setToNow({key:'from'})"
+            kbn-accessible-click
+          >
+            Set To Now
+          </a>
+        </div>
+      </div>
+
       <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.from">
+      <div ng-show="!absolute.from"><em>Invalid Date</em></div>
+
+      <div>
+        <datepicker ng-model="pickFromDate" ng-model-options="{ getterSetter: true }" max-date="absolute.to" show-weeks="false"></datepicker>
+      </div>
     </div>
-    <div>
-      <datepicker ng-model="pickFromDate" ng-model-options="{ getterSetter: true }" max-date="absolute.to" show-weeks="false"></datepicker>
-    </div>
-  </div>
 
-  <div class="kbn-timepicker-section">
-    <div>
-      <label class="small">To:
-        <a
-          class="label label-default"
-          ng-click="setToNow({key:'to'})"
-          kbn-accessible-click
-        >
-          Set To Now
-        </a>
-      </label>
+    <div class="kbn-timepicker-section kbn-timepicker-body-column">
+      <div class="kuiLocalDropdownHeader kbn-timepicker-form-header">
+        <label class="kuiLocalDropdownHeader__label">
+          To
+        </label>
+
+        <div class="kuiLocalDropdownHeader__actions">
+          <a
+            class="kuiLocalDropdownHeader__action"
+            ng-click="setToNow({key:'to'})"
+            kbn-accessible-click
+          >
+            Set To Now
+          </a>
+        </div>
+      </div>
+
       <span ng-show="!absolute.to"><em>Invalid Date</em></span>
       <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.to">
-    </div>
-    <div>
-      <datepicker ng-model="pickToDate" ng-model-options="{ getterSetter: true }" min-date="absolute.from" show-weeks="false"></datepicker>
+
+      <div>
+        <datepicker ng-model="pickToDate" ng-model-options="{ getterSetter: true }" min-date="absolute.from" show-weeks="false"></datepicker>
+      </div>
     </div>
   </div>
 
-  <div class="kbn-timepicker-section kbn-timepicker-alert">
-    <label>&nbsp;</label>
-    <div class="form-group">
-      <button
-        data-test-subj="timepickerGoButton"
-        class="kuiButton kuiButton--primary"
-        ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to"
-        type="submit"
-      >
-        Go
-      </button>
-      <span class="small" ng-show="absolute.from > absolute.to"><strong>From</strong> must occur before <strong>To</strong></span>
-    </div>
+  <div class="form-group">
+    <button
+      data-test-subj="timepickerGoButton"
+      class="kuiButton kuiButton--primary"
+      ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to"
+      type="submit"
+    >
+      Go
+    </button>
+    <span class="small" ng-show="absolute.from > absolute.to"><strong>From</strong> must occur before <strong>To</strong></span>
   </div>
 </form>
diff --git a/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html b/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html
index 87423552622ee..6e659719b4a9a 100644
--- a/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html
+++ b/src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.html
@@ -1,4 +1,4 @@
-<div>
+<div class="kbn-timepicker-body">
   <div ng-repeat="list in quickLists" class="kbn-timepicker-section">
     <ul class="list-unstyled">
       <li ng-repeat="option in list">
diff --git a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
index 2713fffff1c71..41aaf7df429ca 100644
--- a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
+++ b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
@@ -1,111 +1,135 @@
 <form role="form" ng-submit="applyRelative()" class="form-inline" name="relativeTime">
-  <div class="kbn-timepicker-section">
-    <label>
-      From:
-      <span ng-show="relative.from.preview">{{relative.from.preview}}</span>
-      <a
-        class="label label-default"
-        ng-click="setRelativeToNow({key:'from'})"
-        kbn-accessible-click
-      >
-        Set To Now
-      </a>
-      <span ng-hide="relative.from.preview"><em>Invalid Expression</em></span>
-    </label>
-    <br>
-    <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
-      <input
-        required
-        ng-model="relative.from.count"
-        ng-change="formatRelative({key:'from'})"
-        greater-than="-1"
-        min="0"
-        type="number"
-        class="form-control">
-    </div>
-    <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
-      <select
-        ng-model="relative.from.unit"
-        ng-options="opt.value as opt.text for opt in relativeOptions"
-        ng-change="formatRelative({key:'from'})"
-        class="form-control col-xs-2">
-      </select>
-    </div>
-    <br>
-    <div class="small">
-      <label>
+  <div class="kbn-timepicker-body kuiVerticalRhythm">
+    <div class="kbn-timepicker-section kbn-timepicker-body-column">
+      <div class="kuiLocalDropdownHeader kbn-timepicker-form-header">
+        <label class="kuiLocalDropdownHeader__label">
+          From
+        </label>
+
+        <div class="kuiLocalDropdownHeader__actions">
+          <a
+            class="kuiLocalDropdownHeader__action"
+            ng-click="setRelativeToNow({key:'from'})"
+            kbn-accessible-click
+          >
+            Set To Now
+          </a>
+        </div>
+      </div>
+
+      <div class="kuiLocalDropdownFormNote kuiVerticalRhythmSmall">
+        <span ng-show="relative.from.preview">
+          {{relative.from.preview}}
+        </span>
+        <span ng-hide="relative.from.preview">
+          <em>Invalid Expression</em>
+        </span>
+      </div>
+
+      <div class="kuiVerticalRhythmSmall" ng-class="{ 'has-error': checkRelative() }">
         <input
-          ng-model="relative.from.round"
-          ng-checked="relative.from.round"
+          required
+          ng-model="relative.from.count"
           ng-change="formatRelative({key:'from'})"
-          type="checkbox">
-        round to the {{units[relative.from.unit.substring(0,1)]}}
-      </label>
-      <div
-        ng-class="{ 'kbn-timepicker-error': checkRelative() }"
-        ng-show="checkRelative()">
-        <strong>From</strong> must occur before <strong>To</strong>
+          greater-than="-1"
+          min="0"
+          type="number"
+          class="form-control fullWidth">
       </div>
-    </div>
-  </div>
 
-  <div class="kbn-timepicker-section">
-    <label>
-      To:
-      <span ng-show="relative.to.preview">{{relative.to.preview}}</span>
-      <a
-        class="label label-default"
-        ng-click="setRelativeToNow({key:'to'})"
-        kbn-accessible-click
-      >
-        Set To Now
-      </a>
-      <span ng-hide="relative.to.preview"><em>Invalid Expression</em></span>
-    </label>
-    <br>
-    <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
-      <input
-        required
-        ng-model="relative.to.count"
-        ng-change="formatRelative({key:'to'})"
-        greater-than="-1"
-        min="0"
-        type="number"
-        class="form-control">
-    </div>
-    <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
-      <select
-        ng-model="relative.to.unit"
-        ng-options="opt.value as opt.text for opt in relativeOptions"
-        ng-change="formatRelative({key:'to'})"
-        class="form-control col-xs-2">
-      </select>
+      <div class="kuiVerticalRhythmSmall" ng-class="{ 'has-error': checkRelative() }">
+        <select
+          ng-model="relative.from.unit"
+          ng-options="opt.value as opt.text for opt in relativeOptions"
+          ng-change="formatRelative({key:'from'})"
+          class="form-control fullWidth">
+        </select>
+      </div>
+
+      <div class="kuiVerticalRhythmSmall">
+        <label>
+          <input
+            ng-model="relative.from.round"
+            ng-checked="relative.from.round"
+            ng-change="formatRelative({key:'from'})"
+            type="checkbox">
+          round to the {{units[relative.from.unit.substring(0,1)]}}
+        </label>
+        <div
+          ng-class="{ 'kbn-timepicker-error': checkRelative() }"
+          ng-show="checkRelative()">
+          <strong>From</strong> must occur before <strong>To</strong>
+        </div>
+      </div>
     </div>
-    <br>
-    <div class="small">
-      <label>
+
+    <div class="kbn-timepicker-section kbn-timepicker-body-column">
+      <div class="kuiLocalDropdownHeader kbn-timepicker-form-header">
+        <label class="kuiLocalDropdownHeader__label">
+          To
+        </label>
+
+        <div class="kuiLocalDropdownHeader__actions">
+          <a
+            class="kuiLocalDropdownHeader__action"
+            ng-click="setRelativeToNow({key:'to'})"
+            kbn-accessible-click
+          >
+            Set To Now
+          </a>
+        </div>
+      </div>
+
+      <div class="kuiLocalDropdownFormNote kuiVerticalRhythmSmall">
+        <span ng-show="relative.to.preview">
+          {{relative.to.preview}}
+        </span>
+        <span ng-hide="relative.to.preview">
+          <em>Invalid Expression</em>
+        </span>
+      </div>
+
+      <div class="kuiVerticalRhythmSmall" ng-class="{ 'has-error': checkRelative() }">
         <input
-          ng-model="relative.to.round"
-          ng-checked="relative.to.round"
+          required
+          ng-model="relative.to.count"
           ng-change="formatRelative({key:'to'})"
-          type="checkbox">
-        round to the {{units[relative.to.unit.substring(0,1)]}}
-      </label>
+          greater-than="-1"
+          min="0"
+          type="number"
+          class="form-control fullWidth">
+      </div>
+
+      <div class="kuiVerticalRhythmSmall" ng-class="{ 'has-error': checkRelative() }">
+        <select
+          ng-model="relative.to.unit"
+          ng-options="opt.value as opt.text for opt in relativeOptions"
+          ng-change="formatRelative({key:'to'})"
+          class="form-control fullWidth">
+        </select>
+      </div>
+
+      <div class="kuiVerticalRhythmSmall">
+        <label>
+          <input
+            ng-model="relative.to.round"
+            ng-checked="relative.to.round"
+            ng-change="formatRelative({key:'to'})"
+            type="checkbox">
+          round to the {{units[relative.to.unit.substring(0,1)]}}
+        </label>
+      </div>
     </div>
   </div>
 
-  <div class="kbn-timepicker-section">
-    <label>&nbsp;</label>
-    <br>
-    <div class="form-group">
-      <button
-        data-test-subj="timepickerGoButton"
-        type="submit"
-        class="kuiButton kuiButton--primary"
-        ng-disabled="!(relative.from.preview && relative.to.preview) || checkRelative()"
-      >
-        Go
-      </button>
-    </div>
+  <div class="form-group kuiVerticalRhythm">
+    <button
+      data-test-subj="timepickerGoButton"
+      type="submit"
+      class="kuiButton kuiButton--primary"
+      ng-disabled="!(relative.from.preview && relative.to.preview) || checkRelative()"
+    >
+      Go
+    </button>
   </div>
 </form>
diff --git a/src/ui/public/timepicker/timepicker.less b/src/ui/public/timepicker/timepicker.less
index 79bf620334b8f..02edfcb61d864 100644
--- a/src/ui/public/timepicker/timepicker.less
+++ b/src/ui/public/timepicker/timepicker.less
@@ -13,6 +13,18 @@
     float: left;
     padding-right: 15px;
   }
+  .kbn-timepicker-body {
+    display: flex;
+    align-itmes: top;
+    justify-content: stretch;
+    width: 600px;
+  }
+  .kbn-timepicker-body-column {
+    width: 100%;
+  }
+  .kbn-timepicker-form-header {
+    margin-bottom: 0 !important;
+  }
   .kbn-refresh-section {
     float: left;
     padding: 0px 15px;

From bba440ff47f0335ba9e1b5acf9a3d46993c49023 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 24 May 2017 12:10:05 -0700
Subject: [PATCH 2/5] Make kbn-timepicker-content responsive so that it stacks
 content on narrower screens.

---
 src/ui/public/timepicker/timepicker.html |  2 +-
 src/ui/public/timepicker/timepicker.less | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/ui/public/timepicker/timepicker.html b/src/ui/public/timepicker/timepicker.html
index f2640fba692e0..17df38e0e4fcc 100644
--- a/src/ui/public/timepicker/timepicker.html
+++ b/src/ui/public/timepicker/timepicker.html
@@ -1,6 +1,6 @@
 <div class="kbn-timepicker">
 
-  <div class="tab-content">
+  <div class="tab-content kbn-timepicker-content">
 
     <!-- Filters -->
     <div ng-show="activeTab === 'filter'" role="tabpanel" class="tab-pane active">
diff --git a/src/ui/public/timepicker/timepicker.less b/src/ui/public/timepicker/timepicker.less
index 02edfcb61d864..7965445fa6553 100644
--- a/src/ui/public/timepicker/timepicker.less
+++ b/src/ui/public/timepicker/timepicker.less
@@ -3,6 +3,11 @@
   display: flex;
   justify-content: flex-end;
 
+  .kbn-timepicker-content {
+    width: 100%;
+    max-width: 600px;
+  }
+
   [kbn-time-input] {
     text-align: center;
   }
@@ -17,7 +22,11 @@
     display: flex;
     align-itmes: top;
     justify-content: stretch;
-    width: 600px;
+    width: 100%;
+
+    @media (max-width: 660px) {
+      flex-direction: column;
+    }
   }
   .kbn-timepicker-body-column {
     width: 100%;

From 459aff863eccb018c7359f2faa2e22580d18285f Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 24 May 2017 13:24:02 -0700
Subject: [PATCH 3/5] Combine Relative input and select fields using
 kuiFieldGroup.

---
 .../kbn_timepicker_relative_panel.html        | 72 ++++++++++---------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
index 41aaf7df429ca..92c7d0101fa84 100644
--- a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
+++ b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
@@ -26,24 +26,26 @@
         </span>
       </div>
 
-      <div class="kuiVerticalRhythmSmall" ng-class="{ 'has-error': checkRelative() }">
-        <input
-          required
-          ng-model="relative.from.count"
-          ng-change="formatRelative({key:'from'})"
-          greater-than="-1"
-          min="0"
-          type="number"
-          class="form-control fullWidth">
-      </div>
+      <div class="kuiFieldGroup kuiVerticalRhythmSmall">
+        <div class="kuiFieldGroupSection kuiFieldGroupSection--wide" ng-class="{ 'has-error': checkRelative() }">
+          <input
+            required
+            ng-model="relative.from.count"
+            ng-change="formatRelative({key:'from'})"
+            greater-than="-1"
+            min="0"
+            type="number"
+            class="form-control fullWidth">
+        </div>
 
-      <div class="kuiVerticalRhythmSmall" ng-class="{ 'has-error': checkRelative() }">
-        <select
-          ng-model="relative.from.unit"
-          ng-options="opt.value as opt.text for opt in relativeOptions"
-          ng-change="formatRelative({key:'from'})"
-          class="form-control fullWidth">
-        </select>
+        <div class="kuiFieldGroupSection" ng-class="{ 'has-error': checkRelative() }">
+          <select
+            ng-model="relative.from.unit"
+            ng-options="opt.value as opt.text for opt in relativeOptions"
+            ng-change="formatRelative({key:'from'})"
+            class="form-control fullWidth">
+          </select>
+        </div>
       </div>
 
       <div class="kuiVerticalRhythmSmall">
@@ -89,24 +91,26 @@
         </span>
       </div>
 
-      <div class="kuiVerticalRhythmSmall" ng-class="{ 'has-error': checkRelative() }">
-        <input
-          required
-          ng-model="relative.to.count"
-          ng-change="formatRelative({key:'to'})"
-          greater-than="-1"
-          min="0"
-          type="number"
-          class="form-control fullWidth">
-      </div>
+      <div class="kuiFieldGroup kuiVerticalRhythmSmall">
+        <div class="kuiFieldGroupSection kuiFieldGroupSection--wide" ng-class="{ 'has-error': checkRelative() }">
+          <input
+            required
+            ng-model="relative.to.count"
+            ng-change="formatRelative({key:'to'})"
+            greater-than="-1"
+            min="0"
+            type="number"
+            class="form-control fullWidth">
+        </div>
 
-      <div class="kuiVerticalRhythmSmall" ng-class="{ 'has-error': checkRelative() }">
-        <select
-          ng-model="relative.to.unit"
-          ng-options="opt.value as opt.text for opt in relativeOptions"
-          ng-change="formatRelative({key:'to'})"
-          class="form-control fullWidth">
-        </select>
+        <div class="kuiFieldGroupSection" ng-class="{ 'has-error': checkRelative() }">
+          <select
+            ng-model="relative.to.unit"
+            ng-options="opt.value as opt.text for opt in relativeOptions"
+            ng-change="formatRelative({key:'to'})"
+            class="form-control fullWidth">
+          </select>
+        </div>
       </div>
 
       <div class="kuiVerticalRhythmSmall">

From c3b361800de5c8d956f9f57d8a03f860cae77f67 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 24 May 2017 13:27:33 -0700
Subject: [PATCH 4/5] Make Timepicker submit button wider.

---
 .../absolute_panel/kbn_timepicker_absolute_panel.html          | 2 +-
 .../relative_panel/kbn_timepicker_relative_panel.html          | 2 +-
 src/ui/public/timepicker/timepicker.less                       | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
index d6a693993a8b9..12ee7b06b9274 100644
--- a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
+++ b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
@@ -54,7 +54,7 @@
   <div class="form-group">
     <button
       data-test-subj="timepickerGoButton"
-      class="kuiButton kuiButton--primary"
+      class="kuiButton kuiButton--primary kbn-timepicker-submit-button"
       ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to"
       type="submit"
     >
diff --git a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
index 92c7d0101fa84..d4b0b9f537c41 100644
--- a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
+++ b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
@@ -130,7 +130,7 @@
     <button
       data-test-subj="timepickerGoButton"
       type="submit"
-      class="kuiButton kuiButton--primary"
+      class="kuiButton kuiButton--primary kbn-timepicker-submit-button"
       ng-disabled="!(relative.from.preview && relative.to.preview) || checkRelative()"
     >
       Go
diff --git a/src/ui/public/timepicker/timepicker.less b/src/ui/public/timepicker/timepicker.less
index 7965445fa6553..41f27231e400d 100644
--- a/src/ui/public/timepicker/timepicker.less
+++ b/src/ui/public/timepicker/timepicker.less
@@ -34,6 +34,9 @@
   .kbn-timepicker-form-header {
     margin-bottom: 0 !important;
   }
+  .kbn-timepicker-submit-button {
+    min-width: 100px;
+  }
   .kbn-refresh-section {
     float: left;
     padding: 0px 15px;

From 697e83523c90b78b9f724ad4654d4299f9f33fc3 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 24 May 2017 13:32:25 -0700
Subject: [PATCH 5/5] Align button on right.

---
 .../absolute_panel/kbn_timepicker_absolute_panel.html         | 2 +-
 .../relative_panel/kbn_timepicker_relative_panel.html         | 2 +-
 src/ui/public/timepicker/timepicker.less                      | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
index 12ee7b06b9274..6cf9707baa15c 100644
--- a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
+++ b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
@@ -51,7 +51,7 @@
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="kbn-timepicker-actions">
     <button
       data-test-subj="timepickerGoButton"
       class="kuiButton kuiButton--primary kbn-timepicker-submit-button"
diff --git a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
index d4b0b9f537c41..990c6cde3773d 100644
--- a/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
+++ b/src/ui/public/timepicker/relative_panel/kbn_timepicker_relative_panel.html
@@ -126,7 +126,7 @@
     </div>
   </div>
 
-  <div class="form-group kuiVerticalRhythm">
+  <div class="kbn-timepicker-actions kuiVerticalRhythm">
     <button
       data-test-subj="timepickerGoButton"
       type="submit"
diff --git a/src/ui/public/timepicker/timepicker.less b/src/ui/public/timepicker/timepicker.less
index 41f27231e400d..435782efd4b1d 100644
--- a/src/ui/public/timepicker/timepicker.less
+++ b/src/ui/public/timepicker/timepicker.less
@@ -34,6 +34,10 @@
   .kbn-timepicker-form-header {
     margin-bottom: 0 !important;
   }
+  .kbn-timepicker-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
   .kbn-timepicker-submit-button {
     min-width: 100px;
   }