From ad589e7485a8ce73fbee661fadfe0d1a1f0fe08d Mon Sep 17 00:00:00 2001 From: Yuan Gong Date: Tue, 12 May 2020 22:04:59 +0800 Subject: [PATCH 1/3] [UI] Wrap parameter/urls on overflow --- frontend/src/components/DetailsTable.tsx | 6 +++--- frontend/src/components/MinioArtifactPreview.tsx | 3 --- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/DetailsTable.tsx b/frontend/src/components/DetailsTable.tsx index a0b9b12f185..8ef06deb29c 100644 --- a/frontend/src/components/DetailsTable.tsx +++ b/frontend/src/components/DetailsTable.tsx @@ -40,10 +40,10 @@ export const css = stylesheet({ flexGrow: 1, }, valueText: { - maxWidth: 400, + // For current use-cases, value text shouldn't be very long. It will be not readable when it's long. + // Therefore, it's easier we just show it completely in the UX. overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', + overflowWrap: 'break-word', }, }); diff --git a/frontend/src/components/MinioArtifactPreview.tsx b/frontend/src/components/MinioArtifactPreview.tsx index 9241ffcc7e8..1bbe2a3db3e 100644 --- a/frontend/src/components/MinioArtifactPreview.tsx +++ b/frontend/src/components/MinioArtifactPreview.tsx @@ -11,9 +11,6 @@ import { ValueComponentProps } from './DetailsTable'; const css = stylesheet({ root: { width: '100%', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', }, preview: { maxHeight: 250, From b3b675d516f72a3bb51e0e6d919ebbb0b966cc9d Mon Sep 17 00:00:00 2001 From: Yuan Gong Date: Tue, 12 May 2020 22:12:17 +0800 Subject: [PATCH 2/3] Add comment about css --- frontend/src/components/DetailsTable.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/DetailsTable.tsx b/frontend/src/components/DetailsTable.tsx index 8ef06deb29c..27119cf0a33 100644 --- a/frontend/src/components/DetailsTable.tsx +++ b/frontend/src/components/DetailsTable.tsx @@ -43,6 +43,8 @@ export const css = stylesheet({ // For current use-cases, value text shouldn't be very long. It will be not readable when it's long. // Therefore, it's easier we just show it completely in the UX. overflow: 'hidden', + // Sometimes, urls will be unbreakable for a long string. overflow-wrap: break-word + // allows breaking an url at middle of a word so it will not overflow and get hidden. overflowWrap: 'break-word', }, }); From 2c7eac8504252ec293e861a26910112331661791 Mon Sep 17 00:00:00 2001 From: Yuan Gong Date: Wed, 13 May 2020 07:31:29 +0800 Subject: [PATCH 3/3] Let artifact preview take over full width --- frontend/src/components/DetailsTable.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/DetailsTable.tsx b/frontend/src/components/DetailsTable.tsx index 27119cf0a33..5be8d69d2b0 100644 --- a/frontend/src/components/DetailsTable.tsx +++ b/frontend/src/components/DetailsTable.tsx @@ -40,6 +40,8 @@ export const css = stylesheet({ flexGrow: 1, }, valueText: { + // flexGrow expands value text to full width. + flexGrow: 1, // For current use-cases, value text shouldn't be very long. It will be not readable when it's long. // Therefore, it's easier we just show it completely in the UX. overflow: 'hidden',