Fix css issues with Safari

customize.dist/src/less/toolbar.less

@@ -12,12 +12,26 @@
     user-select: none;
 }
 
+
+.padColor { color: @toolbar-pad-bg; }
+.codeColor { color: @toolbar-code-bg; }
+.slideColor { color: @toolbar-slide-bg; }
+.pollColor { color: @toolbar-poll-bg; }
+.fileColor { color: @toolbar-file-bg; }
+.whiteboardColor { color: @toolbar-whiteboard-bg; }
+.driveColor { color: @toolbar-drive-bg; }
+.defaultColor { color: @toolbar-default-bg; }
+
+.toolbar-container {
+    display: flex;
+}
 .cke_reset_all * {
     color: inherit;
 }
-
+#cke_editor1 .cke_inner {
-#cke_editor1 {
+    position: absolute;
-    .cke_inner {
+    top: 0;
+    left: 0;
     bottom: 0;
     right: 0;
     display: flex;
@@ -25,7 +39,6 @@
     height: 100vh;
     width: 100vw;
 }
-}
 .cke_toolbox_main {
     display: inline-block;
     margin-bottom: -3px;
@@ -35,16 +48,11 @@
     margin-top: -1px;
     display: flex;
     overflow: visible;
+    iframe {
+        height: auto;
+        width: 100%;
+    }
 }
-
-.padColor { color: @toolbar-pad-bg; }
-.codeColor { color: @toolbar-code-bg; }
-.slideColor { color: @toolbar-slide-bg; }
-.pollColor { color: @toolbar-poll-bg; }
-.fileColor { color: @toolbar-file-bg; }
-.whiteboardColor { color: @toolbar-whiteboard-bg; }
-.driveColor { color: @toolbar-drive-bg; }
-.defaultColor { color: @toolbar-default-bg; }
 
 body .userlist-drawer {
     font: normal normal normal 16px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;

www/common/toolbar2.js

@@ -333,6 +333,11 @@ define([
             if ($content.is(':visible')) { return void show(); }
             hide();
         });
+        $(window).on('resize', function () {
+            mobile = $('body').width() <= 600;
+            var h = $ck.is(':visible') ? -$ck.height() : 0;
+            $content.css('margin-top', h+'px');
+        });
         $closeIcon.click(hide);
         $button.click(function () {
             var visible = $content.is(':visible');

www/pad/inner.html

@@ -14,6 +14,7 @@
     #cke_1_top {
         overflow: visible;
         padding: 0px;
+        display: flex;
     }
     #cke_1_toolbox {
         display: inline-block;

www/pad/main.js

@@ -570,16 +570,10 @@ define([
             // this should only ever get called once, when the chain syncs
             realtimeOptions.onReady = function (info) {
                 if (!module.isMaximized) {
-                    editor.execCommand('maximize');
                     module.isMaximized = true;
-                    // We have to call it 3 times in Safari
+                    $iframe.find('iframe.cke_wysiwyg_frame').css('width', '');
-                    // in order to have the editor fully maximized -_-
+                    $iframe.find('iframe.cke_wysiwyg_frame').css('height', '');
-                    if ((''+window.navigator.vendor).indexOf('Apple') !== -1) {
-                        editor.execCommand('maximize');
-                        editor.execCommand('maximize');
                 }
-                }
-                // editor.execCommand('maximize') removes all the classes from the body tag
                 $iframe.find('body').addClass('app-pad');
 
                 if (module.realtime !== info.realtime) {
@@ -727,7 +721,6 @@ define([
         if (Ckeditor) {
             // mobile configuration
             Ckeditor.config.toolbarCanCollapse = true;
-            Ckeditor.config.height = '72vh';
             if (screen.height < 800) {
                 Ckeditor.config.toolbarStartupExpanded = false;
                 $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, user-scalable=no');