Fixing GavCoin dApp overflow issues (#2953) (#3030)

js/src/dapps/gavcoin/Application/application.css

@@ -18,4 +18,5 @@
 .body {
   background-size: cover;
   background-repeat: no-repeat;
+  width: 100%;
 }

js/src/dapps/gavcoin/Events/events.css

@@ -17,6 +17,11 @@
 .events {
   padding: 4em 2em;
   text-align: center;
+  display: flex;
+}
+
+.container {
+  overflow: auto;
 }
 
 .list {
@@ -30,6 +35,7 @@
   vertical-align: top;
   padding: 0.25em 1em;
   max-height: 1.5em;
+  white-space: nowrap;
 }
 
 .event {

js/src/dapps/gavcoin/Events/events.js

@@ -52,11 +52,13 @@ export default class Events extends Component {
   render () {
     return (
       <div className={ styles.events }>
-        <table className={ styles.list }>
+        <div className={ styles.container }>
-          <tbody>
+          <table className={ styles.list }>
-            { this.renderEvents() }
+            <tbody>
-          </tbody>
+              { this.renderEvents() }
-        </table>
+            </tbody>
+          </table>
+        </div>
       </div>
     );
   }

js/src/dapps/gavcoin/Status/status.css

@@ -20,6 +20,7 @@
   padding: 4em 0 2em 0;
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-around;
 }
 
 .title {
@@ -30,9 +31,8 @@
 }
 
 .item {
-  flex: 0 1 30%;
+  flex: 1;
-  width: 30%;
+  margin: 1.5rem 1rem;
-  margin: 0 1.5%;
   text-align: center;
 }