From b08b5ae82c519d88ce4ff6fbcd83888baae3cada Mon Sep 17 00:00:00 2001
From: David Kalmakoff <69595332+david-kalmakoff@users.noreply.github.com>
Date: Tue, 5 Nov 2024 05:06:33 -0600
Subject: [PATCH] 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 |  2 +-
 ui/src/client/Clients.tsx           |  2 +-
 ui/src/plugin/PluginDetailView.tsx  | 60 +++++++++++++++++------------
 ui/src/plugin/Plugins.tsx           |  2 +-
 ui/src/user/Users.tsx               |  2 +-
 5 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/ui/src/application/Applications.tsx b/ui/src/application/Applications.tsx
index 561e997a..7f3836c4 100644
--- a/ui/src/application/Applications.tsx
+++ b/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>
diff --git a/ui/src/client/Clients.tsx b/ui/src/client/Clients.tsx
index 4fc29ebc..190cb87e 100644
--- a/ui/src/client/Clients.tsx
+++ b/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'}}>
diff --git a/ui/src/plugin/PluginDetailView.tsx b/ui/src/plugin/PluginDetailView.tsx
index dc6dc11c..0a27fad3 100644
--- a/ui/src/plugin/PluginDetailView.tsx
+++ b/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'}}>
-            <Typography variant="h5">
-                {Icon ? (
-                    <span>
-                        <Icon />
-                        &nbsp;
-                    </span>
-                ) : null}
-                {name}
-                {refresh ? (
-                    <Button
-                        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
+            style={{
+                width: '100%',
+                paddingLeft: '16px',
+                paddingRight: '16px',
+            }}>
+            <Container
+                style={{
+                    display: 'block',
+                    width: '100%',
+                    margin: '12px 0px',
+                }}>
+                <Typography variant="h5">
+                    {Icon ? (
+                        <span>
+                            <Icon />
+                            &nbsp;
+                        </span>
+                    ) : null}
+                    {name}
+                    {refresh ? (
+                        <Button
+                            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>
diff --git a/ui/src/plugin/Plugins.tsx b/ui/src/plugin/Plugins.tsx
index ce726f71..810253ce 100644
--- a/ui/src/plugin/Plugins.tsx
+++ b/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>
diff --git a/ui/src/user/Users.tsx b/ui/src/user/Users.tsx
index df71c8b9..7e6f6654 100644
--- a/ui/src/user/Users.tsx
+++ b/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'}}>