[DE] Fix max width for divide of document formats in Download As panel

apps/documenteditor/main/app/view/FileMenuPanels.js

@@ -95,6 +95,16 @@ define([
             this.menu = options.menu;
             this.fileType = options.fileType;
             this.mode = options.mode;
+
+            Common.NotificationCenter.on({
+                'window:resize': _.bind(function() {
+                    var divided = Common.Utils.innerWidth() >= this.maxWidth;
+                    if (this.isDivided !== divided) {
+                        this.$el.find('.divider').css('width', divided ? '100%' : '0');
+                        this.isDivided = divided;
+                    }
+                }, this)
+            });
         },
 
         render: function() {
@@ -125,6 +135,21 @@ define([
                 });
             }
 
+            var itemWidth = 70 + 24, // width + margin
+                maxCount = 0;
+            this.formats.forEach(_.bind(function (item, index) {
+                var count = item.length;
+                if (count > maxCount) {
+                    maxCount = count;
+                }
+            }, this));
+            this.maxWidth = $('#file-menu-panel .panel-menu').outerWidth() + 20 + 10 + itemWidth * maxCount; // menu + left padding + margin
+
+            if (Common.Utils.innerWidth() >= this.maxWidth) {
+                this.$el.find('.divider').css('width', '100%');
+                this.isDivided = true;
+            }
+
             return this;
         },
 

apps/documenteditor/main/resources/less/filemenu.less

@@ -82,38 +82,38 @@
   }
 }
 
-#panel-saveas, #panel-savecopy {
+#file-menu-panel .panel-context {
-  .content-container {
+  #panel-saveas, #panel-savecopy {
-    margin: 30px 0 0 10px;
+    &.content-box {
-
+      padding: 0 0 0 20px;
-    .header {
-      font-size: 18px;
-      margin-bottom: 17px;
     }
 
-    .format-items {
+    .content-container {
-      .format-item {
+      margin: 30px 0 0 10px;
-        float: left;
-        margin: 0 24px 34px 0;
 
-        .btn-doc-format {
+      .header {
-          width: 70px;
+        font-size: 18px;
-          height: 90px;
+        margin-bottom: 17px;
+      }
+
+      .format-items {
+        .format-item {
+          float: left;
+          margin: 0 24px 34px 0;
+
+          .btn-doc-format {
+            width: 70px;
+            height: 90px;
+          }
         }
-      }
 
-      .divider {
-        float: left;
-        width: 0;
-        height: 0;
-      }
-
-      @media(min-width: 800px) {
         .divider {
-          width: 100%;
+          float: left;
+          width: 0;
+          height: 0;
         }
-      }
 
+      }
     }
   }
 }