diff --git a/src/panel-triggers/components/AlertList/AlertCard.tsx b/src/panel-triggers/components/AlertList/AlertCard.tsx index a25f658..5a97aed 100644 --- a/src/panel-triggers/components/AlertList/AlertCard.tsx +++ b/src/panel-triggers/components/AlertList/AlertCard.tsx @@ -284,7 +284,7 @@ class AlertAcknowledgesButton extends PureComponent + : @@ -316,12 +316,7 @@ class AlertAcknowledges extends PureComponent { ); }); return ( -
-
- -
+
@@ -334,6 +329,11 @@ class AlertAcknowledges extends PureComponent { {ackRows}
+
+ +
); } diff --git a/src/panel-triggers/components/Tooltip/Popper.tsx b/src/panel-triggers/components/Tooltip/Popper.tsx index 0f27efe..f3b451b 100644 --- a/src/panel-triggers/components/Tooltip/Popper.tsx +++ b/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 { render() { const { children, renderContent, show, placement, refClassName } = this.props; const { content } = this.props; + const popperClassName = classNames('popper', this.props.popperClassName); return ( @@ -51,7 +54,7 @@ class Popper extends PureComponent { ...transitionStyles[transitionState], }} data-placement={placement} - className="popper" + className={popperClassName} >
{renderContent(content)} diff --git a/src/panel-triggers/components/Tooltip/withPopper.tsx b/src/panel-triggers/components/Tooltip/withPopper.tsx index 4ba0593..00ec28b 100644 --- a/src/panel-triggers/components/Tooltip/withPopper.tsx +++ b/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); } diff --git a/src/sass/_panel-triggers.scss b/src/sass/_panel-triggers.scss index fdc9e87..50dde22 100644 --- a/src/sass/_panel-triggers.scss +++ b/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; } }