Strange effect on TinyMCE editor only on Pivot theme

[poVoq]

Setup

• Browsers and versions: Firefox, Chome, Firefox Android
• MediaWiki version: 1.30
• Pivot version: latest
• Extension version (if connected to the issue): TinyMCE editor https://github.com/yaronkoren/TinyMCE/

Issue

Contrary to all other Mediawiki skins that I tried (Vector, Bootstrap based etc.), the pop-ups for inserting link and images in the TinyMCE editor extension look distorted with the Pivot skin, see screenshots of the issue here: https://github.com/yaronkoren/TinyMCE/issues/14

Any idea what could be causing this? Thanks for the help!

[Hutchy68]

Just took a quick look and the only thing I can see is the computed element set width is really low. On all the other skins it sets to 400px + on Pivot and Foreground it sets to mid 300px. So the question would be why, does Pivot and Foreground have a missing div id, div class, conflicting js, etc.

EDITED

[Hutchy68]

Specifics in Pivot popup form for image uploads. Why is it 100px less?

element.style {
    border-width: 1px;
    z-index: 65536;
    left: 838.5px;
    top: 243.5px;
    width: 369px;
    height: 423px;
}

in Vector

element.style {
    border-width: 1px;
    z-index: 65536;
    left: 794.5px;
    top: 250.5px;
    width: 457px;
    height: 409px;
}

[Hutchy68]

Note calculation is the same in Foreground too.

[poVoq]

Just as a heads up, the exact same issue also happens with the Foreground skin, so I guess it is related to the Zurb framework?