Make status page responsive

status-page/public/stylesheets/style.css

@@ -23,7 +23,6 @@ body {
 }
 
 .page-main-wrapper {
-  width: 100%;
   min-height: 100vh;
   max-height: fit-content;
   display: flex;
@@ -33,8 +32,8 @@ body {
 
 /* .innernew responsive styles */
 .innernew {
-  width: 605px;
   margin: auto;
+  padding: 0 8px;
 }
 
 /* end */
@@ -81,9 +80,12 @@ div.block-chart {
   width: 101%; /* IE overflow fix */
 }
 
+div.block-chart::-webkit-scrollbar {
+  height: 0px;
+}
+
   div.block-chart div.bar {
-    float: left;
-    position: relative;
+    display: inline-block;
     height: 100%;
     width: 4px;
 
@@ -104,8 +106,6 @@ div.block-chart {
     }
 
     div.block-chart div.bar.empty {
-      float: left;
-      position: relative;
       height: 100%;
       width: 4px;
 
@@ -232,6 +232,8 @@ div.block-chart {
 
 .banner {
   width: 100%;
+  height: 250px;
+  object-fit: cover;
 }
 
 /******* Content *******/
@@ -1014,4 +1016,29 @@ margin-left:10px;
   margin: 0 auto;
   left: 0;
   padding-bottom: 10px;
+}
+
+.scroll-content {
+  height: 100%;
+}
+
+@media screen and (max-width: 500px) {
+  .box-inner {
+    padding: 16px;
+  }
+
+  .largestatus {
+    padding: 0 16px;
+    padding-left: 64px;
+  }
+
+  .status-bubble {
+    left: 16px;
+  }
+}
+
+@media screen and (max-width: 420px) {
+  .feed-item div.message {
+    width: auto !important;
+  }
 }

status-page/src/components/UptimeGraphs.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
 import BlockChart from './BlockChart';
 import moment from 'moment';
@@ -80,7 +80,29 @@ const calculateTime = (statuses, start, range) => {
     return { timeBlock, uptimePercent: (totalUptime / totalTime) * 100 };
 };
 
+function debounce(fn, ms) {
+    let timer;
+    // eslint-disable-next-line no-unused-vars
+    return _ => {
+        clearTimeout(timer);
+        // eslint-disable-next-line no-unused-vars
+        timer = setTimeout(_ => {
+            timer = null;
+            fn.apply(this, arguments);
+        }, ms);
+    };
+}
+
 class UptimeGraphs extends Component {
+    constructor(props) {
+        super(props);
+
+        this.container = createRef();
+        this.scrollWrapper = createRef();
+        this.scrollContent = createRef();
+        this.resizeHandler = this.resizeHandler.bind(this);
+    }
+
     componentDidMount() {
         const { monitor } = this.props;
 
@@ -94,6 +116,9 @@ class UptimeGraphs extends Component {
                 endDate
             );
         }
+
+        this.resizeHandler();
+        window.addEventListener('resize', debounce(this.resizeHandler, 100));
     }
 
     componentDidUpdate(prevProps) {
@@ -113,6 +138,33 @@ class UptimeGraphs extends Component {
         }
     }
 
+    componentWillUnmount() {
+        window.removeEventListener('resize', debounce(this.resizeHandler, 100));
+    }
+
+    resizeHandler() {
+        // block chart scroll wrapper
+        const scrollWrapper = this.scrollWrapper.current;
+        scrollWrapper.style.width = 'auto';
+
+        // block chart scroll content
+        const scrollContent = this.scrollContent.current;
+        scrollContent.style.width = 'auto';
+
+        // uptime graph container
+        const container = this.container.current;
+
+        setTimeout(() => {
+            // adjust width
+            scrollWrapper.style.width = `${container.clientWidth}px`;
+            scrollContent.style.width = 'max-content';
+
+            // scroll to end of chart
+            scrollWrapper.scrollLeft =
+                scrollContent.clientWidth - scrollWrapper.clientWidth;
+        }, 400);
+    }
+
     render() {
         const {
             monitorState,
@@ -185,6 +237,7 @@ class UptimeGraphs extends Component {
             <div
                 className="uptime-graph-section dashboard-uptime-graph"
                 id={this.props.id}
+                ref={this.container}
             >
                 <div className="uptime-graph-header clearfix">
                     <span style={status}></span>
@@ -223,7 +276,15 @@ class UptimeGraphs extends Component {
                         {upDays > 1 ? 's' : ''}
                     </span>
                 </div>
-                <div className="block-chart">{block}</div>
+                <div
+                    ref={this.scrollWrapper}
+                    className="block-chart"
+                    style={{ overflowX: 'scroll' }}
+                >
+                    <div ref={this.scrollContent} className="scroll-content">
+                        {block}
+                    </div>
+                </div>
             </div>
         );
     }