From c51f28029094933eac20f22832c027a2942fc549 Mon Sep 17 00:00:00 2001
From: dlpzx <dlpzx@amazon.com>
Date: Fri, 12 Jan 2024 12:20:15 +0100
Subject: [PATCH 1/2] Add word-wrap in strings in share lists

---
 .../Shares/components/ShareBoxListItem.js     | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/modules/Shares/components/ShareBoxListItem.js b/frontend/src/modules/Shares/components/ShareBoxListItem.js
index 96dc241e3..ad7381c0a 100644
--- a/frontend/src/modules/Shares/components/ShareBoxListItem.js
+++ b/frontend/src/modules/Shares/components/ShareBoxListItem.js
@@ -39,7 +39,11 @@ export const ShareBoxListItem = ({ share }) => {
             <Typography color="textPrimary" variant="body1">
               Request owner
             </Typography>
-            <Typography color="textSecondary" variant="body1">
+            <Typography
+              color="textSecondary"
+              variant="body1"
+              style={{ wordWrap: 'break-word' }}
+            >
               {`${share.principal.SamlGroupName}`}
             </Typography>
           </Box>
@@ -55,7 +59,11 @@ export const ShareBoxListItem = ({ share }) => {
             <Typography color="textPrimary" variant="body1">
               IAM role name
             </Typography>
-            <Typography color="textSecondary" variant="body1">
+            <Typography
+              color="textSecondary"
+              variant="body1"
+              style={{ wordWrap: 'break-word' }}
+            >
               {`${share.principal.principalIAMRoleName}`}
             </Typography>
           </Box>
@@ -71,7 +79,11 @@ export const ShareBoxListItem = ({ share }) => {
             <Typography color="textPrimary" variant="body1">
               Dataset
             </Typography>
-            <Typography color="textSecondary" variant="body1">
+            <Typography
+              color="textSecondary"
+              variant="body1"
+              style={{ wordWrap: 'break-word' }}
+            >
               {`${share.dataset.datasetName}`}
             </Typography>
           </Box>
@@ -84,7 +96,11 @@ export const ShareBoxListItem = ({ share }) => {
               px: 3
             }}
           >
-            <Typography color="textPrimary" variant="body1">
+            <Typography
+              color="textPrimary"
+              variant="body1"
+              style={{ wordWrap: 'break-word' }}
+            >
               Dataset Owner
             </Typography>
             <Typography color="textSecondary" variant="body1">

From 8a8a186614199cc06c0119847d894cbbbbcd665f Mon Sep 17 00:00:00 2001
From: dlpzx <dlpzx@amazon.com>
Date: Fri, 12 Jan 2024 14:10:53 +0100
Subject: [PATCH 2/2] Adjust grid items for big screens

---
 .../modules/Shares/components/ShareBoxListItem.js  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/modules/Shares/components/ShareBoxListItem.js b/frontend/src/modules/Shares/components/ShareBoxListItem.js
index ad7381c0a..2788c34b7 100644
--- a/frontend/src/modules/Shares/components/ShareBoxListItem.js
+++ b/frontend/src/modules/Shares/components/ShareBoxListItem.js
@@ -17,7 +17,7 @@ export const ShareBoxListItem = ({ share }) => {
       }}
     >
       <Grid container spacing={0.5} alignItems="center">
-        <Grid item justifyContent="center" md={2} xs={2}>
+        <Grid item justifyContent="center" md={2.2} lg={1.5} xl={1.2}>
           <Box
             sx={{
               pt: 2,
@@ -28,7 +28,7 @@ export const ShareBoxListItem = ({ share }) => {
             <ShareStatus status={share.status} />
           </Box>
         </Grid>
-        <Grid item justifyContent="flex-end" md={2} xs={2}>
+        <Grid item justifyContent="flex-end" md={2} lg={2.25} xl={2.25}>
           <Box
             sx={{
               pt: 2,
@@ -48,7 +48,7 @@ export const ShareBoxListItem = ({ share }) => {
             </Typography>
           </Box>
         </Grid>
-        <Grid item justifyContent="flex-end" md={2} xs={2}>
+        <Grid item justifyContent="flex-end" md={2} lg={2.25} xl={2.25}>
           <Box
             sx={{
               pt: 2,
@@ -68,7 +68,7 @@ export const ShareBoxListItem = ({ share }) => {
             </Typography>
           </Box>
         </Grid>
-        <Grid item justifyContent="center" md={2} xs={2}>
+        <Grid item justifyContent="center" md={2} lg={2.25} xl={2.25}>
           <Box
             sx={{
               pt: 2,
@@ -88,7 +88,7 @@ export const ShareBoxListItem = ({ share }) => {
             </Typography>
           </Box>
         </Grid>
-        <Grid item justifyContent="center" md={2} xs={2}>
+        <Grid item justifyContent="center" md={2} lg={2.25} xl={2.25}>
           <Box
             sx={{
               pt: 2,
@@ -108,7 +108,7 @@ export const ShareBoxListItem = ({ share }) => {
             </Typography>
           </Box>
         </Grid>
-        <Grid item justifyContent="flex-end" md={1.3} xs={1.3}>
+        <Grid item justifyContent="flex-end" md={1.3} lg={1.2} xl={1.4}>
           <Button
             color="primary"
             type="button"
@@ -119,7 +119,7 @@ export const ShareBoxListItem = ({ share }) => {
             Open Share Request
           </Button>
         </Grid>
-        <Grid item justifyContent="flex-end" md={0.2} xs={0.2}>
+        <Grid item justifyContent="flex-end" md={0.2} lg={0.2} xl={0.4}>
           {share.statistics.sharedItems > 0 && (
             <Tooltip
               title={share.statistics.sharedItems + ' shared items'}