XF 2.2 How is the z-index of editorrow in overlay mode set?

[cmpe]

I have a custom addon where a user can click an edit link and it opens an overlay to edit that item like so:

                                <a href="{{ link('item/edit', $item) }}" data-xf-click="overlay" data-cache="false" data-href="{{ link('item/edit', $item, $editParams) }}">
                                        {{ phrase('edit') }}
                                    </a>

In the template that is opened as an overlay, I use an editorrow like this which is a straight up copy paste from the new thread template because item entity is just an extension of a thread along with a sticky submitrow. And this all seems to work fine functionally.

            <div class="js-inlineNewPostFields">
                <xf:editorrow name="message"
                    value="{{ $post.message ?: $forum.draft_thread.message }}"
                    attachments="{{ $attachmentData ? $attachmentData.attachments : [] }}"
                    rowtype="fullWidth noLabel mergePrev"
                    label="{{ phrase('message') }}"
                    data-preview-url="{{ link('forums/thread-preview', $forum) }}" />

                <xf:formrow rowtype="fullWidth noLabel mergePrev noTopPadding">
                    <xf:if is="$attachmentData">
                        <xf:macro template="helper_attach_upload" name="upload_block"
                            arg-attachmentData="{$attachmentData}"
                            arg-forceHash="{$forum.draft_thread.attachment_hash}" />
                    </xf:if>
                </xf:formrow>
            </div>

        <xf:submitrow submit="{{ phrase('cmpe_item_edit_submit') }}" icon="write" sticky="true">
        </xf:submitrow>

However, I am noticing that when I scroll up and down, the submit row gets hidden behind the editor and it's because the z-index for the fr-box div of the editor is set to 901 and 902:

<div class="fr-box bbWrapper fr-ltr fr-basic fr-top" role="application" data-size="MD" style="z-index: 901;">
<div class="fr-toolbar fr-ltr fr-desktop fr-top fr-basic" style="z-index: 902;">

If I open the edit link in a new tab (so not in overlay mode), the z-index is not set and everything is fine:

<div class="fr-box bbWrapper fr-ltr fr-basic fr-top" role="application" data-size="XL">
<div class="fr-toolbar fr-ltr fr-desktop fr-top fr-basic">

So presumably when this gets set to 901/902, it's using the zIndex-9 defined in less but having trouble figuring out where's that is being set. My guess is in javascript land but my javascript-fu is weak so any hints here would be appreciated.

TIA!

 

[cmpe]

Until I get a better understanding of how this mechanic works, I decided to apply this solution which seems a bit hacky.

Add a new class selector with a higher z-index:

.formSubmitRow--ztop {
    z-index: 1000;
}

Then in the template, I add this as a rowtype:

<xf:submitrow submit="{{ phrase('cmpe_item_edit_submit') }}" icon="write" sticky="true" rowtype="ztop">