Fix history dialog overflow (#9471)

* [IMPLY-1661] fix history dialog overflow

* jest -u
This commit is contained in:
mcbrewster 2020-03-09 19:09:59 -07:00 committed by GitHub
parent 814f5a9717
commit 96ed7210d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 87 additions and 81 deletions

View File

@ -16,121 +16,125 @@ exports[`history dialog matches snapshot 1`] = `
tabindex="0" tabindex="0"
> >
<div <div
class="bp3-dialog history-dialog" class="bp3-dialog"
> >
<div <div
class="bp3-dialog-body history-record-container" class="history-dialog"
> >
<span
class="history-dialog-title"
>
History
</span>
<div <div
class="history-record-entries" class="bp3-dialog-body history-record-container"
> >
<span
class="history-dialog-title"
>
History
</span>
<div <div
class="history-record-entry" class="history-record-entries"
> >
<div <div
class="bp3-card bp3-elevation-0" class="history-record-entry"
> >
<div <div
class="history-record-title" class="bp3-card bp3-elevation-0"
> >
<span <div
class="history-record-title-change" class="history-record-title"
>
Change
</span>
<span />
</div>
<div
class="bp3-divider"
/>
<p />
<div
class="json-collapse"
>
<button
class="bp3-button bp3-minimal"
type="button"
> >
<span <span
class="bp3-button-text" class="history-record-title-change"
> >
Payload Change
</span> </span>
</button> <span />
<div> </div>
<div <div
class="bp3-collapse" 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 <div
aria-hidden="false" class="bp3-collapse"
class="bp3-collapse-body" >
style="transform: translateY(-0px);" <div
/> aria-hidden="false"
class="bp3-collapse-body"
style="transform: translateY(-0px);"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div
class="history-record-entry"
>
<div <div
class="bp3-card bp3-elevation-0" class="history-record-entry"
> >
<div <div
class="history-record-title" class="bp3-card bp3-elevation-0"
> >
<span <div
class="history-record-title-change" class="history-record-title"
>
Change
</span>
<span />
</div>
<div
class="bp3-divider"
/>
<p />
<div
class="json-collapse"
>
<button
class="bp3-button bp3-minimal"
type="button"
> >
<span <span
class="bp3-button-text" class="history-record-title-change"
> >
Payload Change
</span> </span>
</button> <span />
<div> </div>
<div <div
class="bp3-collapse" 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 <div
aria-hidden="false" class="bp3-collapse"
class="bp3-collapse-body" >
style="transform: translateY(-0px);" <div
/> aria-hidden="false"
class="bp3-collapse-body"
style="transform: translateY(-0px);"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div
class="bp3-dialog-footer"
>
<div <div
class="bp3-dialog-footer-actions" class="bp3-dialog-footer"
/> >
<div
class="bp3-dialog-footer-actions"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -65,10 +65,12 @@ export const HistoryDialog = React.memo(function HistoryDialog(props: HistoryDia
} }
return ( return (
<Dialog className="history-dialog" isOpen {...props}> <Dialog isOpen {...props}>
<div className={classNames(Classes.DIALOG_BODY, 'history-record-container')}>{content}</div> <div className="history-dialog">
<div className={Classes.DIALOG_FOOTER}> <div className={classNames(Classes.DIALOG_BODY, 'history-record-container')}>{content}</div>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>{buttons}</div> <div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>{buttons}</div>
</div>
</div> </div>
</Dialog> </Dialog>
); );