Fix responsive looks for tables

Author: morrigan

src/components/Table/Table.tsx

@@ -18,14 +18,14 @@ export const Table = ({ data, columns }: ITableProps) => {
 
     return (
         <div className="table-wrapper">
-            <AutoSizer>
-                {({width, height}) => (
+            <AutoSizer disableHeight>
+                {({width}) => (
                     <RTable
                         headerClassName="table-custom-header"
                         rowClassName={getRowClassName}
                         gridClassName="table-custom-grid"
                         width={width}
-                        height={height || 400}
+                        height={400}
                         headerHeight={80}
                         rowHeight={56}
                         rowCount={data.length}

src/components/Table/table.scss

@@ -17,10 +17,16 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  .ReactVirtualized__Table__headerTruncatedText {
+    white-space: pre-wrap;
+    text-align: center;
+  }
 }
 
 .table-custom-grid {
   background-color: $container;
+  border-radius: 0 0 8px 8px;
 }
 
 .table-custom-row {

src/containers/Dashboard/dashboard.scss

@@ -42,27 +42,28 @@ body {
   }
 
   .column.left .container {
-    margin-right: 0.67rem;
+    @media #{$mq-medium} {
+      margin-right: 0.67rem;
+    }
   }
 
   .column.right .container  {
-    margin-left: 0.67rem;
+    @media #{$mq-medium} {
+      margin-left: 0.67rem;
+    }
   }
 
   .tables {
     display: flex;
     flex-direction: column;
+    margin-bottom: 2rem;
 
     @media #{$mq-medium} {
       flex-direction: row;
     }
 
     .table-wrapper {
-      height: 20rem;
-
-      @media #{$mq-medium} {
-        height: auto;
-      }
+      height: auto;
     }
 
     .left {
@@ -77,6 +78,14 @@ body {
       display: flex;
       flex: 1;
     }
+
+    .right {
+      margin-top: 2.67rem;
+
+      @media #{$mq-medium} {
+        margin-top: 0;
+      }
+    }
   }
 }
 

src/containers/Login/LoginForm.tsx

@@ -1,14 +1,23 @@
 import React from "react";
+import { useHistory } from "react-router-dom";
+
 import {Input} from "../../components/Input/Input";
 import {Button} from "../../components/Button/Button";
+import {Routes} from "../../constants/routes";
 
 export const LoginForm = () => {
+    const history = useHistory();
+
+    const onClick = () => {
+        history.push(Routes.DASHBOARD_ROUTE);
+    };
+
     return (
         <form>
             <Input placeholder="Email" icon="email" />
             <Input placeholder="Password" icon="lock" />
 
-            <Button type="primary">Login</Button>
+            <Button type="primary" onClick={onClick}>Login</Button>
         </form>
     );
 };