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,7 +131,18 @@ const PanelWrapper: React.FC<IPanelWrapperProps> = ({
 }) => {
     const Icon = icon;
     return (
-        <Container style={{display: 'block', width: '100%', margin: '20px'}}>
+        <div
+            style={{
+                width: '100%',
+                paddingLeft: '16px',
+                paddingRight: '16px',
+            }}>
+            <Container
+                style={{
+                    display: 'block',
+                    width: '100%',
+                    margin: '12px 0px',
+                }}>
                 <Typography variant="h5">
                     {Icon ? (
                         <span>
@@ -154,6 +165,7 @@ const PanelWrapper: React.FC<IPanelWrapperProps> = ({
                 <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'}}>