ui: Fix wrapping of track details popups

Change-Id: I0edd6f8bc422e508ea98be7859ae4209436c9b3c
google · Jul 22, 2024 · 38699c8 · 38699c8
1 parent 12dba63
commit 38699c8
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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 {