From 5db2f971f2e68c13526b1c286ed28ad778d4dde9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 20 Apr 2019 11:21:27 +0100
Subject: [PATCH] fix(ui): limit annotation width to the parent width

---
 .../AlertGroup/Alert/__snapshots__/index.test.js.snap     | 8 ++++----
 .../Annotation/__snapshots__/index.test.js.snap           | 4 ++--
 .../Grid/AlertGrid/AlertGroup/Annotation/index.js         | 2 +-
 .../GroupFooter/__snapshots__/index.test.js.snap          | 8 ++++----
 4 files changed, 11 insertions(+), 11 deletions(-)

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 b86ba39b4..ddf4bf478 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
@@ -10,7 +10,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
          aria-describedby=\\"tippy-tooltip-5\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
+      <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\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -39,7 +39,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
          aria-describedby=\\"tippy-tooltip-6\\"
          data-original-title=\\"Click to show annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
+      <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\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -168,7 +168,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
          aria-describedby=\\"tippy-tooltip-1\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
+      <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\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -197,7 +197,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
          aria-describedby=\\"tippy-tooltip-2\\"
          data-original-title=\\"Click to show annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
+      <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\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
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 4f4798608..8890c9586 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
@@ -32,7 +32,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
      class
      style=\\"display:inline\\"
 >
-  <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
+  <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\\"
          focusable=\\"false\\"
          data-prefix=\\"fas\\"
@@ -59,7 +59,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
      class
      style=\\"display:inline\\"
 >
-  <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
+  <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\\"
          focusable=\\"false\\"
          data-prefix=\\"fas\\"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
index 88fa805a9..35230e6f9 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
@@ -62,7 +62,7 @@ const RenderNonLinkAnnotation = inject("alertStore")(
         const { name, value } = this.props;
 
         const className =
-          "mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break";
+          "mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100";
 
         if (!this.toggle.visible) {
           return (
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 d3cb19a08..abb327e54 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
@@ -10,7 +10,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
          aria-describedby=\\"tippy-tooltip-1\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
+      <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\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -39,7 +39,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
          aria-describedby=\\"tippy-tooltip-2\\"
          data-original-title=\\"Click to show annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
+      <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\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -153,7 +153,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
          aria-describedby=\\"tippy-tooltip-13\\"
          data-original-title=\\"Click the icon to hide annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
+      <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\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -182,7 +182,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
          aria-describedby=\\"tippy-tooltip-14\\"
          data-original-title=\\"Click to show annotation value\\"
     >
-      <div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
+      <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\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"