Responsive tinyMCE

On a project that I'm working we're using an old version of tinyMCE (https://www.tinymce.com/), specifically we are using version 3.4.5 (released in 2011).

Since last year we've been focusing on making the site responsive, and we've a bunch of legacy stuff that we could improve and use newer version of the libraries that comes bundled with the system.
Making this rich-text editor responsive is a little tricky since its header or toolbar is defined as a table, and its buttons as table cells. After tweaking the details I came with the following solution:

.mceLayout,
.mceToolbar {
 display: block;
 height: initial !important;
}

.mceLayout > tbody,
.mceLayout > tbody > tr,
.mceToolbar > tbody,
.mceToolbar > tbody > tr {
 display: block;
}

.mceLayout tr.mceFirst td.mceToolbar {
        background: #F6F6F6;
 height: initial !important;
 overflow: hidden;
 width: 100%
}

tr.mceIframeRow td {
 display: block;
 float: left;
 height: 28px;
}

I'm sorry about the !importants, please feel free to remove them if you don't need them on your codebase. Hope it helps!

PS: Note that the last version of tinyMCE are actually responsive, this hack is only for old version (assuming you can't upgrade)