diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js index db775ea8be..29392beb44 100644 --- a/ui/.eslintrc.js +++ b/ui/.eslintrc.js @@ -28,14 +28,14 @@ module.exports = { }], // Formatting handled by prettier - "indent": "off", - 'max-len': "off", - "operator-linebreak": "off", - "quotes": "off", - "brace-style": "off", - "space-before-function-paren": "off", - "generator-star-spacing": "off", - "semi-spacing": "off", + 'indent': 'off', + 'max-len': 'off', + 'operator-linebreak': 'off', + 'quotes': 'off', + 'brace-style': 'off', + 'space-before-function-paren': 'off', + 'generator-star-spacing': 'off', + 'semi-spacing': 'off', // clang-format --js used to format EOL comments after (e.g.) an if like: // if (foo) { // insightful comment diff --git a/ui/src/assets/track_panel.scss b/ui/src/assets/track_panel.scss index 6deb6b722e..64615b83ee 100644 --- a/ui/src/assets/track_panel.scss +++ b/ui/src/assets/track_panel.scss @@ -242,7 +242,7 @@ } .pf-track-details-dropdown { - width: 400px; + max-width: 400px; } .pf-panel-group { diff --git a/ui/src/assets/widgets/popup.scss b/ui/src/assets/widgets/popup.scss index e2884a7436..6d26981e1b 100644 --- a/ui/src/assets/widgets/popup.scss +++ b/ui/src/assets/widgets/popup.scss @@ -17,6 +17,10 @@ .pf-popup-portal { position: absolute; z-index: 10; // Hack to show popups over certain other elements + + // When width = 0 it can cause layout issues in popup content, so we give this + // element some width manually + width: 100%; } .pf-popup { diff --git a/ui/src/assets/widgets/tree.scss b/ui/src/assets/widgets/tree.scss index 0f6604bf8e..ffcbf91dfe 100644 --- a/ui/src/assets/widgets/tree.scss +++ b/ui/src/assets/widgets/tree.scss @@ -28,8 +28,9 @@ $chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' background: inherit; padding: 0 0 0 15px; border-radius: 0 $pf-border-radius $pf-border-radius 0; - word-break: break-all; + overflow-wrap: break-word; // Break words if overflowing white-space: pre-wrap; + min-width: 0; // Allow column to shrink past content if container is thin } .pf-tree-gutter {