diff --git a/scss/ui/_flex.scss b/scss/ui/_flex.scss
index feeba75f0..1afa1b06d 100644
--- a/scss/ui/_flex.scss
+++ b/scss/ui/_flex.scss
@@ -99,6 +99,10 @@ $flex-grow-all: 2;
     align-items: stretch;
   }
 
+  .basis-0 {
+    flex-basis: 0;
+  }
+
   .basis-25 {
     flex-basis: 25%;
   }
diff --git a/src/controls/legend/group.js b/src/controls/legend/group.js
index dc83b0ffa..67b719eda 100644
--- a/src/controls/legend/group.js
+++ b/src/controls/legend/group.js
@@ -114,8 +114,8 @@ const Group = function Group(viewer, options = {}) {
       },
       render() {
         const padding = moreInfoButton ? '0.275rem' : '1.875rem';
-        return `<div class="flex row align-center padding-left text-smaller pointer collapse-header" style="width: 100%; padding-right: ${padding}">
-                <div id="${this.getId()}" class="flex row align-center grow">
+        return `<div class="flex row align-center padding-left text-smaller pointer collapse-header item wrap" style="width: 100%; padding-right: ${padding}">
+                <div id="${this.getId()}" class="flex row align-center grow basis-0">
                    ${expandButton.render()}
                     <span class="grow padding-x-small" style="overflow-wrap: anywhere;">${title}</span>
                 </div>
@@ -128,7 +128,7 @@ const Group = function Group(viewer, options = {}) {
 
   const GroupHeader = function GroupHeader() {
     const headerComponent = CollapseHeader({
-      cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small sticky bg-white z-index-low',
+      cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small sticky bg-white z-index-low item wrap',
       style: `top: 0;${moreInfoButton ? 'padding-right: 0.275rem' : ''}`,
       icon,
       title
diff --git a/src/ui/collapseheader.js b/src/ui/collapseheader.js
index fe2618846..37317920e 100644
--- a/src/ui/collapseheader.js
+++ b/src/ui/collapseheader.js
@@ -23,13 +23,13 @@ export default function CollapseHeader(options = {}) {
     icon,
     iconCls: 'rotate grey',
     style: {
-      'align-self': 'flex-end'
+      'align-self': 'center'
     }
   });
 
   const titleCmp = Component({
     render() {
-      return `<span id="${this.getId()}" class="grow">${title}</span>`;
+      return `<span id="${this.getId()}" class="grow  basis-0">${title}</span>`;
     }
   });