diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
index aaff3bad1..f4d5ec76a 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
@@ -128,7 +128,7 @@ const AlertMenu = observer(
           <Reference>
             {({ ref }) => (
               <span
-                className={`components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer ${uniqueClass}`}
+                className={`components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer ${uniqueClass}`}
                 ref={ref}
                 onClick={this.collapse.toggle}
                 data-toggle="dropdown"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
index ddf4bf478..171436ad7 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
@@ -5,7 +5,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
 <li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
   <div>
     <div class
-         style=\\"display: inline;\\"
+         style=\\"display: inline-block; max-width: 100%;\\"
          data-tooltipped
          aria-describedby=\\"tippy-tooltip-5\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
@@ -34,7 +34,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
       </div>
     </div>
     <div class
-         style=\\"display: inline;\\"
+         style=\\"display: inline-block; max-width: 100%;\\"
          data-tooltipped
          aria-describedby=\\"tippy-tooltip-6\\"
          data-original-title=\\"Click to show annotation value\\"
@@ -58,7 +58,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
       </div>
     </div>
   </div>
-  <span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
+  <span class=\\"components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
         data-toggle=\\"dropdown\\"
   >
     <svg aria-hidden=\\"true\\"
@@ -81,12 +81,12 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     </time>
   </span>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-7\\"
        data-original-title=\\"This alert is inhibited by other alerts\\"
   >
-    <span class=\\"text-nowrap text-truncate mr-1 badge badge-light\\">
+    <span class=\\"mr-1 badge badge-light\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
@@ -104,12 +104,12 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     </span>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-8\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         job:
       </span>
@@ -119,12 +119,12 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     </span>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-9\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         cluster:
       </span>
@@ -136,7 +136,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
   <a href=\\"http://localhost\\"
      target=\\"_blank\\"
      rel=\\"noopener noreferrer\\"
-     class=\\"components-label-with-hover text-nowrap text-truncate badge mr-1 components-grid-annotation-link\\"
+     class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
   >
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
@@ -163,7 +163,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
 <li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
   <div>
     <div class
-         style=\\"display: inline;\\"
+         style=\\"display: inline-block; max-width: 100%;\\"
          data-tooltipped
          aria-describedby=\\"tippy-tooltip-1\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
@@ -192,7 +192,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
       </div>
     </div>
     <div class
-         style=\\"display: inline;\\"
+         style=\\"display: inline-block; max-width: 100%;\\"
          data-tooltipped
          aria-describedby=\\"tippy-tooltip-2\\"
          data-original-title=\\"Click to show annotation value\\"
@@ -216,7 +216,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
       </div>
     </div>
   </div>
-  <span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
+  <span class=\\"components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
         data-toggle=\\"dropdown\\"
   >
     <svg aria-hidden=\\"true\\"
@@ -239,12 +239,12 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
     </time>
   </span>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-3\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         job:
       </span>
@@ -254,12 +254,12 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
     </span>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-4\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         cluster:
       </span>
@@ -271,7 +271,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
   <a href=\\"http://localhost\\"
      target=\\"_blank\\"
      rel=\\"noopener noreferrer\\"
-     class=\\"components-label-with-hover text-nowrap text-truncate badge mr-1 components-grid-annotation-link\\"
+     class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
   >
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js
index 393aef0d2..771bb00fd 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js
@@ -97,7 +97,7 @@ const Alert = observer(
             .map(am => am.inhibitedBy.length)
             .reduce((sum, x) => sum + x) > 0 ? (
             <TooltipWrapper title="This alert is inhibited by other alerts">
-              <span className="text-nowrap text-truncate mr-1 badge badge-light">
+              <span className="mr-1 badge badge-light">
                 <FontAwesomeIcon className="text-success" icon={faVolumeMute} />
               </span>
             </TooltipWrapper>
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
index 8890c9586..4337bd638 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
@@ -5,7 +5,7 @@ exports[`<RenderLinkAnnotation /> matches snapshot 1`] = `
 <a href=\\"http://localhost/foo\\"
    target=\\"_blank\\"
    rel=\\"noopener noreferrer\\"
-   class=\\"components-label-with-hover text-nowrap text-truncate badge mr-1 components-grid-annotation-link\\"
+   class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
 >
   <svg aria-hidden=\\"true\\"
        focusable=\\"false\\"
@@ -30,7 +30,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
 "
 <div title=\\"Click to show annotation value\\"
      class
-     style=\\"display:inline\\"
+     style=\\"display:inline-block;max-width:100%\\"
 >
   <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
     <svg aria-hidden=\\"true\\"
@@ -57,7 +57,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
 "
 <div title=\\"Click the icon to hide annotation value\\"
      class
-     style=\\"display:inline\\"
+     style=\\"display:inline-block;max-width:100%\\"
 >
   <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
     <svg aria-hidden=\\"true\\"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
index 35230e6f9..3ca0d7abb 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
@@ -110,7 +110,7 @@ const RenderLinkAnnotation = ({ name, value }) => {
       href={value}
       target="_blank"
       rel="noopener noreferrer"
-      className="components-label-with-hover text-nowrap text-truncate badge mr-1 components-grid-annotation-link"
+      className="components-label components-label-with-hover badge mr-1 components-grid-annotation-link"
     >
       <FontAwesomeIcon icon={faExternalLinkAlt} /> {name}
     </a>
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
index abb327e54..2c3349bf1 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -5,7 +5,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
 <div class=\\"card-footer bg-card-footer-default px-2 py-1\\">
   <div class=\\"mb-1\\">
     <div class
-         style=\\"display: inline;\\"
+         style=\\"display: inline-block; max-width: 100%;\\"
          data-tooltipped
          aria-describedby=\\"tippy-tooltip-1\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
@@ -34,7 +34,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
       </div>
     </div>
     <div class
-         style=\\"display: inline;\\"
+         style=\\"display: inline-block; max-width: 100%;\\"
          data-tooltipped
          aria-describedby=\\"tippy-tooltip-2\\"
          data-original-title=\\"Click to show annotation value\\"
@@ -59,12 +59,12 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     </div>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-3\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label1:
       </span>
@@ -74,12 +74,12 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     </span>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-4\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label2:
       </span>
@@ -89,12 +89,12 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     </span>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-5\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @alertmanager:
       </span>
@@ -104,12 +104,12 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     </span>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-6\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @receiver:
       </span>
@@ -121,7 +121,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
   <a href=\\"http://link.example.com\\"
      target=\\"_blank\\"
      rel=\\"noopener noreferrer\\"
-     class=\\"components-label-with-hover text-nowrap text-truncate badge mr-1 components-grid-annotation-link\\"
+     class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
   >
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
@@ -148,7 +148,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
 <div class=\\"card-footer bg-card-footer-default px-2 py-1\\">
   <div class=\\"mb-1\\">
     <div class
-         style=\\"display: inline;\\"
+         style=\\"display: inline-block; max-width: 100%;\\"
          data-tooltipped
          aria-describedby=\\"tippy-tooltip-13\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
@@ -177,7 +177,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
       </div>
     </div>
     <div class
-         style=\\"display: inline;\\"
+         style=\\"display: inline-block; max-width: 100%;\\"
          data-tooltipped
          aria-describedby=\\"tippy-tooltip-14\\"
          data-original-title=\\"Click to show annotation value\\"
@@ -202,12 +202,12 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     </div>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-15\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label1:
       </span>
@@ -217,12 +217,12 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     </span>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-16\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label2:
       </span>
@@ -232,12 +232,12 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     </span>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-17\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @alertmanager:
       </span>
@@ -247,12 +247,12 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     </span>
   </div>
   <div class
-       style=\\"display: inline;\\"
+       style=\\"display: inline-block; max-width: 100%;\\"
        data-tooltipped
        aria-describedby=\\"tippy-tooltip-18\\"
        data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
   >
-    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @receiver:
       </span>
@@ -264,7 +264,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
   <a href=\\"http://link.example.com\\"
      target=\\"_blank\\"
      rel=\\"noopener noreferrer\\"
-     class=\\"components-label-with-hover text-nowrap text-truncate badge mr-1 components-grid-annotation-link\\"
+     class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
   >
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
@@ -299,7 +299,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
           <span class=\\"blockquote-footer pt-1\\">
             <span class=\\"float-right cursor-pointer\\">
               <div class
-                   style=\\"display: inline;\\"
+                   style=\\"display: inline-block; max-width: 100%;\\"
                    data-tooltipped
                    aria-describedby=\\"tippy-tooltip-19\\"
                    data-original-title=\\"Toggle silence details\\"
@@ -323,7 +323,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
             <cite class=\\"components-grid-alertgroup-silences mr-2\\">
               me@example.com
             </cite>
-            <span class=\\"badge badge-danger text-nowrap text-truncate mw-100 align-bottom\\">
+            <span class=\\"badge badge-danger align-bottom\\">
               Expired
               <time datetime=\\"946688400000\\">
                 14 hours ago
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js
index 89255fcbf..4f0308675 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js
@@ -126,7 +126,7 @@ const GroupMenu = observer(
                 onClick={this.collapse.toggle}
                 className={`${
                   themed ? "text-white" : "text-muted"
-                } cursor-pointer badge text-nowrap text-truncate pl-0 components-grid-alertgroup-${
+                } cursor-pointer badge pl-0 components-label mr-0 components-grid-alertgroup-${
                   group.id
                 }`}
                 data-toggle="dropdown"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
index b82535b76..ede512463 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
@@ -82,7 +82,7 @@ const GroupHeader = observer(
             <span
               className={`${
                 themedCounters ? "text-muted" : "text-white"
-              } cursor-pointer badge text-nowrap text-truncate px-0`}
+              } cursor-pointer badge px-0 components-label mr-0`}
               onClick={collapseStore.toggle}
             >
               <TooltipWrapper title="Toggle group details">
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js
index 256297fac..fed804637 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js
@@ -250,7 +250,7 @@ const DeleteSilence = observer(
       return (
         <React.Fragment>
           <span
-            className={`badge badge-danger text-nowrap text-truncate px-1 cursor-pointer components-label-with-hover`}
+            className={`badge badge-danger px-1 cursor-pointer components-label-with-hover`}
             onClick={this.toggle.toggle}
           >
             <FontAwesomeIcon className="mr-1" icon={faTrash} />
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap
index 43503773b..1551e98bf 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap
@@ -28,7 +28,7 @@ exports[`<Silence /> matches snapshot when data is present in alertStore 1`] = `
       <span class=\\"blockquote-footer pt-1\\">
         <span class=\\"float-right cursor-pointer\\">
           <div class
-               style=\\"display: inline;\\"
+               style=\\"display: inline-block; max-width: 100%;\\"
                data-tooltipped
                aria-describedby=\\"tippy-tooltip-1\\"
                data-original-title=\\"Toggle silence details\\"
@@ -52,7 +52,7 @@ exports[`<Silence /> matches snapshot when data is present in alertStore 1`] = `
         <cite class=\\"components-grid-alertgroup-silences mr-2\\">
           me@example.com
         </cite>
-        <span class=\\"badge badge-light nmb-05 text-nowrap text-truncate mw-100 align-bottom\\">
+        <span class=\\"badge badge-light nmb-05 align-bottom\\">
           Expires
           <time datetime=\\"946756800000\\">
             in 5 hours
@@ -93,7 +93,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
       <span class=\\"blockquote-footer pt-1\\">
         <span class=\\"float-right cursor-pointer\\">
           <div class
-               style=\\"display: inline;\\"
+               style=\\"display: inline-block; max-width: 100%;\\"
                data-tooltipped
                aria-describedby=\\"tippy-tooltip-5\\"
                data-original-title=\\"Toggle silence details\\"
@@ -123,12 +123,12 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
   <div class=\\"mt-1\\">
     <div>
       <div class
-           style=\\"display: inline;\\"
+           style=\\"display: inline-block; max-width: 100%;\\"
            data-tooltipped
            aria-describedby=\\"tippy-tooltip-6\\"
            data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
       >
-        <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+        <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
           <span class=\\"components-label-name\\">
             @alertmanager:
           </span>
@@ -140,7 +140,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
       <a href=\\"file:///mock/#/silences/4cf5fd82-1edd-4169-99d1-ff8415e72179\\"
          target=\\"_blank\\"
          rel=\\"noopener noreferrer\\"
-         class=\\"components-label-with-hover text-nowrap text-truncate badge mr-1 components-grid-annotation-link\\"
+         class=\\"components-label components-label-with-hover badge mr-1 components-grid-annotation-link\\"
       >
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
@@ -160,7 +160,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
       </a>
     </div>
     <div>
-      <span class=\\"badge text-nowrap text-truncate px-1 mr-1\\">
+      <span class=\\"badge px-1 mr-1\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -180,7 +180,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
           5 hours ago
         </time>
       </span>
-      <span class=\\"badge  text-nowrap text-truncate px-1 mr-1\\">
+      <span class=\\"badge  px-1 mr-1\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -200,7 +200,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
           in 5 hours
         </time>
       </span>
-      <span class=\\"badge badge-secondary text-nowrap text-truncate px-1 cursor-pointer components-label-with-hover mr-1\\">
+      <span class=\\"badge badge-secondary px-1 cursor-pointer components-label-with-hover mr-1\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -217,7 +217,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
         </svg>
         Edit
       </span>
-      <span class=\\"badge badge-danger text-nowrap text-truncate px-1 cursor-pointer components-label-with-hover\\">
+      <span class=\\"badge badge-danger px-1 cursor-pointer components-label-with-hover\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -236,7 +236,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
       </span>
     </div>
     <div>
-      <span class=\\"badge text-nowrap text-truncate px-1 mr-1\\">
+      <span class=\\"badge px-1 mr-1\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -253,10 +253,10 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
         </svg>
         Matchers:
       </span>
-      <span class=\\"badge badge-light text-nowrap text-truncate px-1 mr-1\\">
+      <span class=\\"badge badge-light px-1 mr-1\\">
         alertname=MockAlert
       </span>
-      <span class=\\"badge badge-light text-nowrap text-truncate px-1 mr-1\\">
+      <span class=\\"badge badge-light px-1 mr-1\\">
         instance=~foo[0-9]+
       </span>
     </div>
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js
index 76ed0f478..9b67c9cd7 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js
@@ -64,7 +64,7 @@ const SilenceExpiryBadgeWithProgress = ({ silence, progress }) => {
   // if silence is expired we can skip progress value calculation
   if (moment(silence.endsAt) < moment()) {
     return (
-      <span className="badge badge-danger text-nowrap text-truncate mw-100 align-bottom">
+      <span className="badge badge-danger align-bottom">
         Expired <Moment fromNow>{silence.endsAt}</Moment>
       </span>
     );
@@ -80,7 +80,7 @@ const SilenceExpiryBadgeWithProgress = ({ silence, progress }) => {
   }
 
   return (
-    <span className="badge badge-light nmb-05 text-nowrap text-truncate mw-100 align-bottom">
+    <span className="badge badge-light nmb-05 align-bottom">
       Expires <Moment fromNow>{silence.endsAt}</Moment>
       <div className="progress silence-progress bg-white">
         <div
@@ -126,18 +126,16 @@ const SilenceDetails = ({
         />
       </div>
       <div>
-        <span className="badge text-nowrap text-truncate px-1 mr-1">
+        <span className="badge px-1 mr-1">
           <FontAwesomeIcon className="text-muted mr-1" icon={faCalendarCheck} />
           Started <Moment fromNow>{silence.startsAt}</Moment>
         </span>
-        <span
-          className={`badge ${expiresClass} text-nowrap text-truncate px-1 mr-1`}
-        >
+        <span className={`badge ${expiresClass} px-1 mr-1`}>
           <FontAwesomeIcon className="text-muted mr-1" icon={faCalendarTimes} />
           {expiresLabel} <Moment fromNow>{silence.endsAt}</Moment>
         </span>
         <span
-          className="badge badge-secondary text-nowrap text-truncate px-1 cursor-pointer components-label-with-hover mr-1"
+          className="badge badge-secondary px-1 cursor-pointer components-label-with-hover mr-1"
           onClick={onEditSilence}
         >
           <FontAwesomeIcon className="mr-1" icon={faEdit} />
@@ -150,15 +148,12 @@ const SilenceDetails = ({
         />
       </div>
       <div>
-        <span className="badge text-nowrap text-truncate px-1 mr-1">
+        <span className="badge px-1 mr-1">
           <FontAwesomeIcon className="text-muted mr-1" icon={faFilter} />
           Matchers:
         </span>
         {silence.matchers.map(matcher => (
-          <span
-            key={hash(matcher)}
-            className="badge badge-light text-nowrap text-truncate px-1 mr-1"
-          >
+          <span key={hash(matcher)} className="badge badge-light px-1 mr-1">
             {matcher.name}
             {matcher.isRegex ? QueryOperators.Regex : QueryOperators.Equal}
             {matcher.value}
diff --git a/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap b/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
index bce2c5f61..9304cfe5c 100644
--- a/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
@@ -9,7 +9,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
   <div>
     <ul class=\\"list-group list-group-flush mb-3\\">
       <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+        <span class=\\"components-label badge badge-warning components-label-dark \\">
           <span class=\\"components-label-name\\">
             foo:
           </span>
@@ -19,7 +19,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
         </span>
       </li>
       <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+        <span class=\\"components-label badge badge-warning components-label-dark \\">
           <span class=\\"components-label-name\\">
             job:
           </span>
@@ -29,7 +29,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
         </span>
       </li>
       <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+        <span class=\\"components-label badge badge-warning components-label-dark \\">
           <span class=\\"components-label-name\\">
             instance:
           </span>
@@ -39,7 +39,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
         </span>
       </li>
       <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+        <span class=\\"components-label badge badge-warning components-label-dark \\">
           <span class=\\"components-label-name\\">
             cluster:
           </span>
diff --git a/ui/src/Components/Labels/BaseLabel/index.js b/ui/src/Components/Labels/BaseLabel/index.js
index 7b6f024a4..a7e184388 100644
--- a/ui/src/Components/Labels/BaseLabel/index.js
+++ b/ui/src/Components/Labels/BaseLabel/index.js
@@ -30,13 +30,7 @@ class BaseLabel extends Component {
     const data = {
       style: {},
       className: "",
-      baseClassNames: [
-        "components-label",
-        elementType,
-        "text-nowrap",
-        "text-truncate",
-        "mw-100"
-      ],
+      baseClassNames: ["components-label", elementType],
       colorClassNames: []
     };
 
diff --git a/ui/src/Components/Labels/BaseLabel/index.scss b/ui/src/Components/Labels/BaseLabel/index.scss
index 996c6cd2c..2a087be75 100644
--- a/ui/src/Components/Labels/BaseLabel/index.scss
+++ b/ui/src/Components/Labels/BaseLabel/index.scss
@@ -8,6 +8,21 @@
 
 .components-label {
   margin-right: 0.25rem;
+
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* https://stackoverflow.com/a/20566810 */
+  vertical-align: bottom !important;
+
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+span.badge.components-label:not(.badge-pill) {
+  /* badge class uses em and we modify font sizes a bit, so switch to rem */
+  padding: 0.25rem 0.4rem;
 }
 
 .components-label-bright {
diff --git a/ui/src/Components/Labels/FilterInputLabel/index.js b/ui/src/Components/Labels/FilterInputLabel/index.js
index b0df1c167..d282d9f9e 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.js
+++ b/ui/src/Components/Labels/FilterInputLabel/index.js
@@ -88,7 +88,7 @@ const FilterInputLabel = observer(
           )}
           <TooltipWrapper
             title="Click to edit this filter"
-            className="my-auto text-nowrap text-truncate align-text-bottom components-filteredinputlabel-text"
+            className="components-filteredinputlabel-text flex-grow-1 flex-shrink-1"
           >
             <RIEInput
               className="cursor-text ml-1"
diff --git a/ui/src/Components/Labels/FilterInputLabel/index.scss b/ui/src/Components/Labels/FilterInputLabel/index.scss
index cc390110d..a24a72abf 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.scss
+++ b/ui/src/Components/Labels/FilterInputLabel/index.scss
@@ -2,6 +2,15 @@
 
 .components-filteredinputlabel-text {
   font-size: 1rem;
+  min-width: 1%;
+
+  & > span {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+    max-width: 100%;
+  }
 }
 
 .components-filteredinputlabel > .badge,
diff --git a/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap b/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap
index 4e122333f..411ee21af 100644
--- a/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap
@@ -3,12 +3,12 @@
 exports[`<FilteringLabel /> matches snapshot 1`] = `
 "
 <div class
-     style=\\"display: inline;\\"
+     style=\\"display: inline-block; max-width: 100%;\\"
      data-tooltipped
      aria-describedby=\\"tippy-tooltip-1\\"
      data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
 >
-  <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+  <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
     <span class=\\"components-label-name\\">
       foo:
     </span>
diff --git a/ui/src/Components/Labels/HistoryLabel/index.css b/ui/src/Components/Labels/HistoryLabel/index.css
index 0e258c6bb..c1c720ec2 100644
--- a/ui/src/Components/Labels/HistoryLabel/index.css
+++ b/ui/src/Components/Labels/HistoryLabel/index.css
@@ -1,4 +1,3 @@
-.badge.components-label-history {
-  /* fix align after text-truncate */
-  vertical-align: middle;
+.components-label.components-label-history {
+    font-size: 80%;
 }
diff --git a/ui/src/Components/Labels/StaticLabel/__snapshots__/index.test.js.snap b/ui/src/Components/Labels/StaticLabel/__snapshots__/index.test.js.snap
index fa79adad8..b9be407da 100644
--- a/ui/src/Components/Labels/StaticLabel/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Labels/StaticLabel/__snapshots__/index.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<StaticLabel /> matches snapshot 1`] = `
 "
-<span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+<span class=\\"components-label badge badge-warning components-label-dark \\">
   <span class=\\"components-label-name\\">
     foo:
   </span>
diff --git a/ui/src/Components/NavBar/FilterInput/index.css b/ui/src/Components/NavBar/FilterInput/index.css
index f2960e29c..5900cb574 100644
--- a/ui/src/Components/NavBar/FilterInput/index.css
+++ b/ui/src/Components/NavBar/FilterInput/index.css
@@ -1,9 +1,10 @@
 .form-control.components-filterinput {
   cursor: text;
   height: auto;
+  min-height: 2.6rem;
 
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+  padding-top: 2px;
+  padding-bottom: 2px;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
@@ -17,6 +18,8 @@ input.components-filterinput-wrapper {
   vertical-align: middle;
 }
 
-.autosuggest {
+.components-filterinput-wrapper {
   min-height: 2rem;
+  margin-top: 2px;
+  margin-bottom: 2px;
 }
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
index 550c753e5..73d0f4bb0 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
@@ -7,7 +7,7 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
     <div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi\\">
       <div title=\\"Number of alerts matching this label\\"
            class
-           style=\\"display:inline\\"
+           style=\\"display:inline-block;max-width:100%\\"
       >
         <span class=\\"badge badge-light badge-pill\\"
               style=\\"font-size:85%\\"
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
index 0b646cfcb..7fd1c8df0 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<MatchCounter /> matches snapshot with empty matcher 1`] = `
 "
 <div class
-     style=\\"display: inline;\\"
+     style=\\"display: inline-block; max-width: 100%;\\"
      data-tooltipped
      aria-describedby=\\"tippy-tooltip-1\\"
      data-original-title=\\"Number of alerts matching this label\\"
diff --git a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
index dc840fb79..9b59e5f39 100644
--- a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
@@ -10,7 +10,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
     <div>
       <ul class=\\"list-group list-group-flush mb-3\\">
         <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-          <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-dark components-label-dark \\">
+          <span class=\\"components-label badge badge-dark components-label-dark \\">
             <span class=\\"components-label-name\\">
               alertname:
             </span>
@@ -18,7 +18,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               foo
             </span>
           </span>
-          <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+          <span class=\\"components-label badge badge-warning components-label-dark \\">
             <span class=\\"components-label-name\\">
               job:
             </span>
@@ -26,7 +26,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               foo
             </span>
           </span>
-          <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+          <span class=\\"components-label badge badge-warning components-label-dark \\">
             <span class=\\"components-label-name\\">
               instance:
             </span>
@@ -36,7 +36,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
           </span>
         </li>
         <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-          <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-dark components-label-dark \\">
+          <span class=\\"components-label badge badge-dark components-label-dark \\">
             <span class=\\"components-label-name\\">
               alertname:
             </span>
@@ -44,7 +44,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               bar
             </span>
           </span>
-          <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+          <span class=\\"components-label badge badge-warning components-label-dark \\">
             <span class=\\"components-label-name\\">
               job:
             </span>
@@ -52,7 +52,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               bar
             </span>
           </span>
-          <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+          <span class=\\"components-label badge badge-warning components-label-dark \\">
             <span class=\\"components-label-name\\">
               instance:
             </span>
@@ -62,7 +62,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
           </span>
         </li>
         <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-          <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-dark components-label-dark \\">
+          <span class=\\"components-label badge badge-dark components-label-dark \\">
             <span class=\\"components-label-name\\">
               alertname:
             </span>
@@ -70,7 +70,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               bar
             </span>
           </span>
-          <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+          <span class=\\"components-label badge badge-warning components-label-dark \\">
             <span class=\\"components-label-name\\">
               job:
             </span>
@@ -78,7 +78,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               bar
             </span>
           </span>
-          <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark \\">
+          <span class=\\"components-label badge badge-warning components-label-dark \\">
             <span class=\\"components-label-name\\">
               instance:
             </span>
diff --git a/ui/src/Components/TooltipWrapper/index.js b/ui/src/Components/TooltipWrapper/index.js
index 590143a4c..5f735f209 100644
--- a/ui/src/Components/TooltipWrapper/index.js
+++ b/ui/src/Components/TooltipWrapper/index.js
@@ -6,7 +6,13 @@ import { Tooltip } from "react-tippy";
 import "react-tippy/dist/tippy.css";
 
 const TooltipWrapper = ({ children, ...props }) => (
-  <Tooltip delay={[1000, 100]} size="small" touchHold={true} {...props}>
+  <Tooltip
+    delay={[1000, 100]}
+    size="small"
+    touchHold={true}
+    style={{ display: "inline-block", "maxWidth": "100%" }}
+    {...props}
+  >
     {children}
   </Tooltip>
 );