fix(ui): cleanup css classes for labels

2026-05-07 03:26:52 +00:00 · 2019-05-03 12:08:26 +01:00
parent 06eb8a2742
commit dc00ef86c8
24 changed files with 130 additions and 109 deletions
--- 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"
--- 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\\"
--- 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>
--- 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\\"
--- 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>
--- 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
--- 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"
--- 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">
--- 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} />
--- 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>
--- 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}
--- 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>
--- 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: []
    };

--- 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 {
--- 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"
--- 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,
--- 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>
--- 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%;
 }
--- 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>
--- 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;
 }
--- 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%\\"
--- 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\\"
--- 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>
--- 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>
 );