From 89d351ccc6ac990f3262552f9edabb2080f52d83 Mon Sep 17 00:00:00 2001
From: Krzysztof Bialoglowicz <krzysztof@mirumee.com>
Date: Mon, 4 Nov 2019 21:31:49 +0100
Subject: [PATCH] Fix dialog tables on mobile

---
 .../ResponsiveTable/ResponsiveTable.tsx       | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/ResponsiveTable/ResponsiveTable.tsx b/src/components/ResponsiveTable/ResponsiveTable.tsx
index 370539458..b886bb066 100644
--- a/src/components/ResponsiveTable/ResponsiveTable.tsx
+++ b/src/components/ResponsiveTable/ResponsiveTable.tsx
@@ -1,20 +1,20 @@
-import { Theme } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
-import { makeStyles } from "@material-ui/styles";
+import makeStyles from "@material-ui/core/styles/makeStyles";
 import React from "react";
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
-    [theme.breakpoints.up("sm")]: {
-      "& table": {
-        tableLayout: "fixed"
-      }
-    },
+  theme => ({
     root: {
+      [theme.breakpoints.up("sm")]: {
+        "& table": {
+          tableLayout: "fixed"
+        }
+      },
       "& table": {
         tableLayout: "auto"
       },
-      overflowX: "auto"
+      overflowX: "auto",
+      width: "100%"
     }
   }),
   {
@@ -29,15 +29,13 @@ interface ResponsiveTableProps {
 }
 
 const ResponsiveTable: React.FC<ResponsiveTableProps> = props => {
-  const { children, className, key } = props;
+  const { children, className } = props;
 
   const classes = useStyles(props);
 
   return (
     <div className={classes.root}>
-      <Table className={className} key={key}>
-        {children}
-      </Table>
+      <Table className={className}>{children}</Table>
     </div>
   );
 };