problems: fix ack tooltip styles for alert list

src/panel-triggers/components/AlertList/AlertCard.tsx

@@ -284,7 +284,7 @@ class AlertAcknowledgesButton extends PureComponent<AlertAcknowledgesButtonProps
     const { problem } = this.props;
     return (
       problem.acknowledges && problem.acknowledges.length ?
-        <Tooltip placement="bottom" content={this.renderTooltipContent}>
+        <Tooltip placement="bottom" popperClassName="ack-tooltip" content={this.renderTooltipContent}>
           <span><i className="fa fa-comments"></i></span>
         </Tooltip> :
         <Tooltip placement="bottom" content="Acknowledge problem">
@@ -316,12 +316,7 @@ class AlertAcknowledges extends PureComponent<AlertAcknowledgesProps> {
       );
     });
     return (
-      <div>
-        <div className="ack-add-button">
-          <button id="add-acknowledge-btn" className="btn btn-mini btn-inverse gf-form-button" onClick={this.handleClick}>
-            <i className="fa fa-plus"></i>
-          </button>
-        </div>
+      <div className="ack-tooltip">
         <table className="table">
           <thead>
             <tr>
@@ -334,6 +329,11 @@ class AlertAcknowledges extends PureComponent<AlertAcknowledgesProps> {
             {ackRows}
           </tbody>
         </table>
+        <div className="ack-add-button">
+          <button id="add-acknowledge-btn" className="btn btn-mini btn-inverse gf-form-button" onClick={this.handleClick}>
+            <i className="fa fa-plus"></i>
+          </button>
+        </div>
       </div>
     );
   }

src/panel-triggers/components/Tooltip/Popper.tsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import classNames from 'classnames';
 import BodyPortal from './Portal';
 import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
 import Transition from 'react-transition-group/Transition';
@@ -21,12 +22,14 @@ interface Props {
   placement?: any;
   content: string | ((props: any) => JSX.Element);
   refClassName?: string;
+  popperClassName?: string;
 }
 
 class Popper extends PureComponent<Props> {
   render() {
     const { children, renderContent, show, placement, refClassName } = this.props;
     const { content } = this.props;
+    const popperClassName = classNames('popper', this.props.popperClassName);
 
     return (
       <Manager>
@@ -51,7 +54,7 @@ class Popper extends PureComponent<Props> {
                         ...transitionStyles[transitionState],
                       }}
                       data-placement={placement}
-                      className="popper"
+                      className={popperClassName}
                     >
                       <div className="popper__background">
                         {renderContent(content)}

src/panel-triggers/components/Tooltip/withPopper.tsx

@@ -9,12 +9,14 @@ export interface UsingPopperProps {
   content: string | ((props: any) => JSX.Element);
   className?: string;
   refClassName?: string;
+  popperClassName?: string;
 }
 
 interface Props {
   placement?: string;
   className?: string;
   refClassName?: string;
+  popperClassName?: string;
   content: string | ((props: any) => JSX.Element);
 }
 

src/sass/_panel-triggers.scss

@@ -182,10 +182,8 @@
 }
 
 .ack-tooltip {
-  .drop-content {
-    // Rewrite tooltip width
-    max-width: 70rem !important;
-    min-width: 30rem !important;
+  &.popper {
+    max-width: 800px;
   }
 
   .ack-comments {
@@ -193,25 +191,13 @@
   }
 
   .ack-add-button {
-    padding-top: 1rem;
+    padding-top: 0.4rem;
+    text-align: left;
   }
 
   table td, th {
     padding-right: 1rem;
-  }
-
-  .ack-input-group {
-    padding-top: 1rem;
-
-    input {
-      border: 1px solid;
-      border-radius: 2px;
-      width: 50%;
-    }
-
-    button {
-      margin-left: 1rem;
-    }
+    text-align: left;
   }
 }