From 96ed7210d3badf835123cf0c0bcc082187b9557e Mon Sep 17 00:00:00 2001
From: mcbrewster <37322608+mcbrewster@users.noreply.github.com>
Date: Mon, 9 Mar 2020 19:09:59 -0700
Subject: [PATCH] Fix history dialog overflow (#9471)

* [IMPLY-1661] fix history dialog overflow

* jest -u
---
 .../history-dialog.spec.tsx.snap              | 158 +++++++++---------
 .../dialogs/history-dialog/history-dialog.tsx |  10 +-
 2 files changed, 87 insertions(+), 81 deletions(-)

diff --git a/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap b/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap
index dd3e2b64c5b..fc17aa50e81 100644
--- a/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap
@@ -16,121 +16,125 @@ exports[`history dialog matches snapshot 1`] = `
       tabindex="0"
     >
       <div
-        class="bp3-dialog history-dialog"
+        class="bp3-dialog"
       >
         <div
-          class="bp3-dialog-body history-record-container"
+          class="history-dialog"
         >
-          <span
-            class="history-dialog-title"
-          >
-            History
-          </span>
           <div
-            class="history-record-entries"
+            class="bp3-dialog-body history-record-container"
           >
+            <span
+              class="history-dialog-title"
+            >
+              History
+            </span>
             <div
-              class="history-record-entry"
+              class="history-record-entries"
             >
               <div
-                class="bp3-card bp3-elevation-0"
+                class="history-record-entry"
               >
                 <div
-                  class="history-record-title"
+                  class="bp3-card bp3-elevation-0"
                 >
-                  <span
-                    class="history-record-title-change"
-                  >
-                    Change
-                  </span>
-                  <span />
-                </div>
-                <div
-                  class="bp3-divider"
-                />
-                <p />
-                <div
-                  class="json-collapse"
-                >
-                  <button
-                    class="bp3-button bp3-minimal"
-                    type="button"
+                  <div
+                    class="history-record-title"
                   >
                     <span
-                      class="bp3-button-text"
+                      class="history-record-title-change"
                     >
-                      Payload
+                      Change
                     </span>
-                  </button>
-                  <div>
-                    <div
-                      class="bp3-collapse"
+                    <span />
+                  </div>
+                  <div
+                    class="bp3-divider"
+                  />
+                  <p />
+                  <div
+                    class="json-collapse"
+                  >
+                    <button
+                      class="bp3-button bp3-minimal"
+                      type="button"
                     >
+                      <span
+                        class="bp3-button-text"
+                      >
+                        Payload
+                      </span>
+                    </button>
+                    <div>
                       <div
-                        aria-hidden="false"
-                        class="bp3-collapse-body"
-                        style="transform: translateY(-0px);"
-                      />
+                        class="bp3-collapse"
+                      >
+                        <div
+                          aria-hidden="false"
+                          class="bp3-collapse-body"
+                          style="transform: translateY(-0px);"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="history-record-entry"
-            >
               <div
-                class="bp3-card bp3-elevation-0"
+                class="history-record-entry"
               >
                 <div
-                  class="history-record-title"
+                  class="bp3-card bp3-elevation-0"
                 >
-                  <span
-                    class="history-record-title-change"
-                  >
-                    Change
-                  </span>
-                  <span />
-                </div>
-                <div
-                  class="bp3-divider"
-                />
-                <p />
-                <div
-                  class="json-collapse"
-                >
-                  <button
-                    class="bp3-button bp3-minimal"
-                    type="button"
+                  <div
+                    class="history-record-title"
                   >
                     <span
-                      class="bp3-button-text"
+                      class="history-record-title-change"
                     >
-                      Payload
+                      Change
                     </span>
-                  </button>
-                  <div>
-                    <div
-                      class="bp3-collapse"
+                    <span />
+                  </div>
+                  <div
+                    class="bp3-divider"
+                  />
+                  <p />
+                  <div
+                    class="json-collapse"
+                  >
+                    <button
+                      class="bp3-button bp3-minimal"
+                      type="button"
                     >
+                      <span
+                        class="bp3-button-text"
+                      >
+                        Payload
+                      </span>
+                    </button>
+                    <div>
                       <div
-                        aria-hidden="false"
-                        class="bp3-collapse-body"
-                        style="transform: translateY(-0px);"
-                      />
+                        class="bp3-collapse"
+                      >
+                        <div
+                          aria-hidden="false"
+                          class="bp3-collapse-body"
+                          style="transform: translateY(-0px);"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          class="bp3-dialog-footer"
-        >
           <div
-            class="bp3-dialog-footer-actions"
-          />
+            class="bp3-dialog-footer"
+          >
+            <div
+              class="bp3-dialog-footer-actions"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/web-console/src/dialogs/history-dialog/history-dialog.tsx b/web-console/src/dialogs/history-dialog/history-dialog.tsx
index 9c82a894e8e..7b894226898 100644
--- a/web-console/src/dialogs/history-dialog/history-dialog.tsx
+++ b/web-console/src/dialogs/history-dialog/history-dialog.tsx
@@ -65,10 +65,12 @@ export const HistoryDialog = React.memo(function HistoryDialog(props: HistoryDia
   }
 
   return (
-    <Dialog className="history-dialog" isOpen {...props}>
-      <div className={classNames(Classes.DIALOG_BODY, 'history-record-container')}>{content}</div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <div className={Classes.DIALOG_FOOTER_ACTIONS}>{buttons}</div>
+    <Dialog isOpen {...props}>
+      <div className="history-dialog">
+        <div className={classNames(Classes.DIALOG_BODY, 'history-record-container')}>{content}</div>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>{buttons}</div>
+        </div>
       </div>
     </Dialog>
   );