Calendar updates. Responsive CSS updates.

components/metrics/MetricCard.module.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   min-width: 120px;
-  margin-right: 20px;
+  padding-right: 20px;
 }
 
 .value {
@@ -16,4 +16,5 @@
 
 .label {
   font-size: var(--font-size-normal);
+  white-space: nowrap;
 }

components/metrics/MetricsBar.module.css

@@ -4,6 +4,9 @@
 }
 
 @media only screen and (max-width: 992px) {
+  .bar {
+    justify-content: space-between;
+  }
   .bar > div:last-child {
     display: none;
   }

components/metrics/WebsiteChart.js

@@ -57,14 +57,17 @@ export default function WebsiteChart({
           stickyClassName={styles.sticky}
           enabled={stickyHeader}
         >
-          <MetricsBar className="col-12 col-md-9" websiteId={websiteId} />
-          <DateFilter
-            className="col-12 col-md-3"
-            value={value}
-            startDate={startDate}
-            endDate={endDate}
-            onChange={handleDateChange}
-          />
+          <div className="col-12 col-lg-9">
+            <MetricsBar websiteId={websiteId} />
+          </div>
+          <div className={classNames(styles.filter, 'col-12 col-lg-3')}>
+            <DateFilter
+              value={value}
+              startDate={startDate}
+              endDate={endDate}
+              onChange={handleDateChange}
+            />
+          </div>
         </StickyHeader>
       </div>
       <div className="row">

components/metrics/WebsiteChart.module.css

@@ -29,3 +29,15 @@
   border-bottom: 1px solid var(--gray300);
   z-index: 3;
 }
+
+.filter {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+@media only screen and (max-width: 992px) {
+  .filter {
+    display: block;
+  }
+}