diff --git a/src/panel-triggers/components/Problems/ProblemDetails.tsx b/src/panel-triggers/components/Problems/ProblemDetails.tsx
index cccc0a6..37c076b 100644
--- a/src/panel-triggers/components/Problems/ProblemDetails.tsx
+++ b/src/panel-triggers/components/Problems/ProblemDetails.tsx
@@ -102,106 +102,110 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
 
     return (
       <div className={`problem-details-container ${displayClass}`}>
-        <div className="problem-details">
-          <div className="problem-details-row">
-            <div className="problem-value-container">
-              <div className="problem-age">
-                <FAIcon icon="clock-o" />
-                <span>{age}</span>
+        <div className="problem-details-head">
+          <div className="problem-actions-left">
+            <ExploreButton problem={problem} panelId={this.props.panelId} />
+          </div>
+          {problem.showAckButton &&
+            <div className="problem-actions">
+              <ModalController>
+                {({ showModal, hideModal }) => (
+                  <ExecScriptButton
+                    className="problem-action-button"
+                    onClick={() => {
+                      showModal(ExecScriptModal, {
+                        getScripts: this.getScripts,
+                        onSubmit: this.onExecuteScript,
+                        onDismiss: hideModal,
+                      });
+                    }}
+                  />
+                )}
+              </ModalController>
+              <ModalController>
+                {({ showModal, hideModal }) => (
+                  <AckButton
+                    className="problem-action-button"
+                    onClick={() => {
+                      showModal(AckModal, {
+                        canClose: problem.manual_close === '1',
+                        severity: problemSeverity,
+                        onSubmit: this.ackProblem,
+                        onDismiss: hideModal,
+                      });
+                    }}
+                  />
+                )}
+              </ModalController>
+            </div>
+          }
+          <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
+        </div>
+        <div className="problem-details-body">
+          <div className="problem-details">
+            <div className="problem-details-row">
+              <div className="problem-value-container">
+                <div className="problem-age">
+                  <FAIcon icon="clock-o" />
+                  <span>{age}</span>
+                </div>
+                {problem.items && <ProblemItems items={problem.items} />}
               </div>
-              {problem.items && <ProblemItems items={problem.items} />}
             </div>
-            <div className="problem-actions-left">
-              <ExploreButton problem={problem} panelId={this.props.panelId} />
-            </div>
-            <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
-            {problem.showAckButton &&
-              <div className="problem-actions">
-                <ModalController>
-                  {({ showModal, hideModal }) => (
-                    <ExecScriptButton
-                      className="navbar-button navbar-button--settings"
-                      onClick={() => {
-                        showModal(ExecScriptModal, {
-                          getScripts: this.getScripts,
-                          onSubmit: this.onExecuteScript,
-                          onDismiss: hideModal,
-                        });
-                      }}
-                    />
-                  )}
-                </ModalController>
-                <ModalController>
-                  {({ showModal, hideModal }) => (
-                    <AckButton
-                      className="navbar-button navbar-button--settings"
-                      onClick={() => {
-                        showModal(AckModal, {
-                          canClose: problem.manual_close === '1',
-                          severity: problemSeverity,
-                          onSubmit: this.ackProblem,
-                          onDismiss: hideModal,
-                        });
-                      }}
-                    />
-                  )}
-                </ModalController>
+            {problem.comments &&
+              <div className="problem-description-row">
+                <div className="problem-description">
+                  <Tooltip placement="right" content={problem.comments}>
+                    <span className="description-label">Description:&nbsp;</span>
+                  </Tooltip>
+                  <span>{problem.comments}</span>
+                </div>
+              </div>
+            }
+            {problem.tags && problem.tags.length > 0 &&
+              <div className="problem-tags">
+                {problem.tags && problem.tags.map(tag =>
+                  <EventTag
+                    key={tag.tag + tag.value}
+                    tag={tag}
+                    highlight={tag.tag === problem.correlation_tag}
+                    onClick={this.handleTagClick}
+                  />)
+                }
+              </div>
+            }
+            {this.props.showTimeline && this.state.events.length > 0 &&
+              <ProblemTimeline events={this.state.events} timeRange={this.props.timeRange} />
+            }
+            {showAcknowledges && !wideLayout &&
+              <div className="problem-ack-container">
+                <h6><FAIcon icon="reply-all" /> Acknowledges</h6>
+                <AcknowledgesList acknowledges={problem.acknowledges} />
               </div>
             }
           </div>
-          {problem.comments &&
-            <div className="problem-description-row">
-              <div className="problem-description">
-                <Tooltip placement="right" content={problem.comments}>
-                  <span className="description-label">Description:&nbsp;</span>
-                </Tooltip>
-                <span>{problem.comments}</span>
+          {showAcknowledges && wideLayout &&
+            <div className="problem-details-middle">
+              <div className="problem-ack-container">
+                <h6><FAIcon icon="reply-all" /> Acknowledges</h6>
+                <AcknowledgesList acknowledges={problem.acknowledges} />
               </div>
             </div>
           }
-          {problem.tags && problem.tags.length > 0 &&
-            <div className="problem-tags">
-              {problem.tags && problem.tags.map(tag =>
-                <EventTag
-                  key={tag.tag + tag.value}
-                  tag={tag}
-                  highlight={tag.tag === problem.correlation_tag}
-                  onClick={this.handleTagClick}
-                />)
-              }
-            </div>
-          }
-          {this.props.showTimeline && this.state.events.length > 0 &&
-            <ProblemTimeline events={this.state.events} timeRange={this.props.timeRange} />
-          }
-          {showAcknowledges && !wideLayout &&
-            <div className="problem-ack-container">
-              <h6><FAIcon icon="reply-all" /> Acknowledges</h6>
-              <AcknowledgesList acknowledges={problem.acknowledges} />
-            </div>
-          }
-        </div>
-        {showAcknowledges && wideLayout &&
-          <div className="problem-details-middle">
-            <div className="problem-ack-container">
-              <h6><FAIcon icon="reply-all" /> Acknowledges</h6>
-              <AcknowledgesList acknowledges={problem.acknowledges} />
-            </div>
-          </div>
-        }
-        <div className="problem-details-right">
-          <div className="problem-details-right-item">
-            <FAIcon icon="database" />
-            <span>{problem.datasource}</span>
-          </div>
-          {problem.proxy &&
+          <div className="problem-details-right">
             <div className="problem-details-right-item">
-              <FAIcon icon="cloud" />
-              <span>{problem.proxy}</span>
+              <FAIcon icon="database" />
+              <span>{problem.datasource}</span>
             </div>
-          }
-          {problem.groups && <ProblemGroups groups={problem.groups} className="problem-details-right-item" />}
-          {problem.hosts && <ProblemHosts hosts={problem.hosts} className="problem-details-right-item" />}
+            {problem.proxy &&
+              <div className="problem-details-right-item">
+                <FAIcon icon="cloud" />
+                <span>{problem.proxy}</span>
+              </div>
+            }
+            {problem.groups && <ProblemGroups groups={problem.groups} className="problem-details-right-item" />}
+            {problem.hosts && <ProblemHosts hosts={problem.hosts} className="problem-details-right-item" />}
+          </div>
         </div>
       </div>
     );
diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index 4ce953c..ac14843 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -215,6 +215,7 @@
 
     .problem-details-container {
       display: flex;
+      flex-direction: column;
       padding-top: 4px;
       background-color: $problem-details-background;
       border-bottom-width: 0px;
@@ -227,7 +228,7 @@
       transition-property: opacity, max-height;
 
       &.show {
-        max-height: 20rem;
+        max-height: 23rem;
         opacity: 1;
         box-shadow: inset -3px 3px 10px $problem-container-shadow;
       }
@@ -244,6 +245,15 @@
         }
       }
 
+      .problem-details-head {
+        display: flex;
+        padding: 0.5rem 1rem 0.5rem 1.2rem;
+      }
+
+      .problem-details-body {
+        display: flex;
+      }
+
       .problem-details {
         position: relative;
         flex: 10 1 auto;
@@ -256,7 +266,8 @@
 
         .problem-description {
           position: relative;
-          height: 4.5rem;
+          max-height: 4.5rem;
+          min-height: 3rem;
           overflow: hidden;
 
           &:after {
@@ -358,7 +369,11 @@
 
       .problem-actions {
         display: flex;
-        margin-left: 1.6rem;
+        margin-right: 1.6rem;
+      }
+
+      .problem-action-button {
+        margin-right: 0.2rem;
       }
 
       .problem-actions-left {
@@ -376,6 +391,7 @@
       }
 
       .problem-ack-container {
+        max-height: 8rem;
         margin-top: 0.6rem;
         margin-left: -0.6rem;
         padding: 1.2rem 0.6rem;