Dialog Overlay not resizing based on browser resize

[msmithmis]

Hi, I am using Twitter Bootstrap within the dialog overlay. The dialog overlay is called by the Schedule calendar control. The dialog pops up and looks fine when the browser is maximized. When the browser is shrunk to mobile phone size (or if the calendar is opened with the browser screen in mobile size), the controls in the rows do not stack (resize) properly. I have bootstrap columns that stack properly when put on on a standard HTML page, but when I put them into a dialog overlay, they do not stack. I tried changing the p-dialog settings, but I couldn't make it work. I want to re-iterate that I am not talking about resizing the dialog, but instead resizing the browser. In other words, if the site is opened on a mobile device, the popup is larger than the screen and cut off. This is a complex data entry form with multiple columns and rows. Is this a bug in the dialog overlay or is twitter bootstrap not supported or is browser based resizing not available in this dialog control or am i just doing something wrong? Any help would is appreciated. I want to avoid creating a custom popup.

<p-dialog header="Event Details" [(visible)]="dialogVisible" [responsive]="true" showEffect="fade" [modal]="false" [minHeight]=640 [height]=640 [width]=800 [minWidth]=100>