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,12 +52,14 @@ export default class Events extends Component {
   render () {
     return (
       <div className={ styles.events }>
+        <div className={ styles.container }>
           <table className={ styles.list }>
             <tbody>
               { this.renderEvents() }
             </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%;
-  width: 30%;
-  margin: 0 1.5%;
+  flex: 1;
+  margin: 1.5rem 1rem;
   text-align: center;
 }