[UI] Wrap parameter/urls on overflow (#3747)

* [UI] Wrap parameter/urls on overflow * Add comment about css * Let artifact preview take over full width
kubeflow · May 13, 2020 · bd4be88 · bd4be88
1 parent e8356bc
commit bd4be88
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/frontend/src/components/DetailsTable.tsx b/frontend/src/components/DetailsTable.tsx
@@ -40,10 +40,14 @@ export const css = stylesheet({
     flexGrow: 1,
   },
   valueText: {
-    maxWidth: 400,
+    // 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',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    // 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',
   },
 });
 

diff --git 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,