fix: table overflow and word wrapping (#720)

- applications (table)
- clients (table)
- plugins (table, info card word wrapping, and card padding)

Co-authored-by: David Kalmakoff <david@localhost.localdomain>

ui/src/application/Applications.tsx

@@ -59,7 +59,7 @@ class Applications extends Component<Stores<'appStore'>> {
                 }
                 maxWidth={1000}>
                 <Grid item xs={12}>
-                    <Paper elevation={6}>
+                    <Paper elevation={6} style={{overflowX: 'auto'}}>
                         <Table id="app-table">
                             <TableHead>
                                 <TableRow>

ui/src/client/Clients.tsx

@@ -54,7 +54,7 @@ class Clients extends Component<Stores<'clientStore'>> {
                     </Button>
                 }>
                 <Grid item xs={12}>
-                    <Paper elevation={6}>
+                    <Paper elevation={6} style={{overflowX: 'auto'}}>
                         <Table id="client-table">
                             <TableHead>
                                 <TableRow style={{textAlign: 'center'}}>

ui/src/plugin/PluginDetailView.tsx

@@ -131,29 +131,41 @@ const PanelWrapper: React.FC<IPanelWrapperProps> = ({
 }) => {
     const Icon = icon;
     return (
-        <Container style={{display: 'block', width: '100%', margin: '20px'}}>
+        <div
-            <Typography variant="h5">
+            style={{
-                {Icon ? (
+                width: '100%',
-                    <span>
+                paddingLeft: '16px',
-                        <Icon />
+                paddingRight: '16px',
-                        &nbsp;
+            }}>
-                    </span>
+            <Container
-                ) : null}
+                style={{
-                {name}
+                    display: 'block',
-                {refresh ? (
+                    width: '100%',
-                    <Button
+                    margin: '12px 0px',
-                        style={{float: 'right'}}
+                }}>
-                        onClick={() => {
+                <Typography variant="h5">
-                            refresh();
+                    {Icon ? (
-                        }}>
+                        <span>
-                        <Refresh />
+                            <Icon />
-                    </Button>
+                            &nbsp;
-                ) : null}
+                        </span>
-            </Typography>
+                    ) : null}
-            {description ? <Typography variant="subtitle1">{description}</Typography> : null}
+                    {name}
-            <hr />
+                    {refresh ? (
-            <div className={name.toLowerCase().trim().replace(/ /g, '-')}>{children}</div>
+                        <Button
-        </Container>
+                            style={{float: 'right'}}
+                            onClick={() => {
+                                refresh();
+                            }}>
+                            <Refresh />
+                        </Button>
+                    ) : null}
+                </Typography>
+                {description ? <Typography variant="subtitle1">{description}</Typography> : null}
+                <hr />
+                <div className={name.toLowerCase().trim().replace(/ /g, '-')}>{children}</div>
+            </Container>
+        </div>
     );
 };
 
@@ -225,7 +237,7 @@ class PluginInfo extends Component<{pluginInfo: IPlugin}> {
             },
         } = this;
         return (
-            <div>
+            <div style={{wordWrap: 'break-word'}}>
                 {name ? (
                     <Typography variant="body2" className="name">
                         Name: <span>{name}</span>

ui/src/plugin/Plugins.tsx

@@ -27,7 +27,7 @@ class Plugins extends Component<Stores<'pluginStore'>> {
         return (
             <DefaultPage title="Plugins" maxWidth={1000}>
                 <Grid item xs={12}>
-                    <Paper elevation={6}>
+                    <Paper elevation={6} style={{overflowX: 'auto'}}>
                         <Table id="plugin-table">
                             <TableHead>
                                 <TableRow>

ui/src/user/Users.tsx

@@ -80,7 +80,7 @@ class Users extends Component<WithStyles<'wrapper'> & Stores<'userStore'>> {
                     </Button>
                 }>
                 <Grid item xs={12}>
-                    <Paper elevation={6}>
+                    <Paper elevation={6} style={{overflowX: 'auto'}}>
                         <Table id="user-table">
                             <TableHead>
                                 <TableRow style={{textAlign: 'center'}}>