Fix Update button from falling out, add date range labels

grafana · Feb 2, 2021 · 534ce1f · 534ce1f
1 parent 9880432
commit 534ce1f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/webapp/javascript/components/DateRangePicker.jsx b/webapp/javascript/components/DateRangePicker.jsx
@@ -94,6 +94,7 @@ function DateRangePicker() {
             ))}
           </div>
           <h4>Custom Date Range</h4>
+          <div className="drp-label">From</div>
           <div className="drp-calendar-input-group">
             <DatePicker
               className="followed-by-btn"
@@ -112,6 +113,7 @@ function DateRangePicker() {
               Update
             </button>
           </div>
+          <div className="drp-label">To</div>
           <div className="drp-calendar-input-group">
             <DatePicker
               className="followed-by-btn"

diff --git a/webapp/sass/components/daterangepicker.scss b/webapp/sass/components/daterangepicker.scss
@@ -1,6 +1,6 @@
 @use "../variables" as *;
 @use "../mixins/outline" as *;
-/** 
+/**
 * DatePicker Compenent styles
 * TODO: adjust styling
 */
@@ -13,6 +13,10 @@
   text-overflow: ellipsis;
 }
 
+.drp-label {
+  margin-bottom: -10px;
+}
+
 .drp-container {
   position: relative;
   svg {
@@ -77,5 +81,7 @@
 
   .drp-calendar-input-group {
     margin-top: 15px;
+    display: flex;
+    flex-direction: row;
   }
 }