I have a modal panel that is a simple pop up to show a comment field. The data is rich text so I'm using the rich:editor to display it.

<a4j:outputPanel id="modalShowTextOutputPanel">

    <rich:popupPanel id="modalShowTextPopupPanel" autosized="true"
        minHeight="500" minWidth="600" style="z-index:1000 !important;"
        closeOnEscape="true">
        <f:facet name="header">
            <h:outputText value="#{modalShowText.modalHeaderLabel}" />
        </f:facet>

        <h:panelGrid width="100%" columns="2"
            columnClasses="table-column-left-half,table-column-right-half">
            <h:outputText value="#{modalShowText.fieldLabel}" />
            <a4j:commandLink
                onclick="#{rich:component('modalShowTextPopupPanel')}.hide();"
                value="#{modalShowText.fieldCloseLabel}"
                title="#{messages.getString('application.lbl.escape')}" />
        </h:panelGrid>

        <h:panelGrid id="panelGridText" width="100%" columns="1"
            columnClasses="table-column-left">

            <h:form id="modalShowTextForm">
                <rich:hotKey enabledInInput="true" key="esc"
                    onkeyup="#{rich:component('modalShowTextPopupPanel')}.hide();" />

                <rich:editor value="#{modalShowText.text}" toolbar="custom"
                    readonly="true"
                    style="resize:both;height:100% !important;width:100% !important;">
                    <f:facet name="config">toolbar_custom: [{ name: 'document', items : [ 'Preview' ] }]</f:facet>
                </rich:editor>
            </h:form>

        </h:panelGrid>

    </rich:popupPanel>

</a4j:outputPanel>

I have a style set on the editor to supposedly tell it to fill the area but as you can see in the attached picture, it doesn't.

Is there something I have to do to make the editor resize properly?