JQuery UI Dialog content overflowing width of dialog

JQuery UI Dialog content overflowing width of dialog

I created a dialog using the following code:

$(document).ready(function () {
       $( "#sourcesDialog" ).dialog({
      autoOpen: false,
      modal: true,
      width: 800,
      height: 600,
      resizable: false,
      show: {
            duration: 500
      },
      hide: {
            duration: 500
      },
   });
});

The code to open the dialog:

$("#SomeElement").on("click", "button[data-nj='sourcesButton']", function () {
     $("#sourcesDialog").dialog("open");
});

The dialog html:

<div id="sourcesDialog" title="Sources" style="display: none; min-width: 700px;width:700px">
    <div id="sourcesTable" style="padding-top: 10px; min-width: 700px; width: 700px">
        This is some text Ive added to make this look wide to see if I can get the dialog to fit the content being displayed.
    </div>
</div>

When the dialog opens it is showing as such:

Any ideas why the content of the dialog is showing off the edge of the actual dialog?  I am assuming something is being applied via css but I am not sure where to look.