From 746c384490a3fd7dbe74d441f0abc6e4ea02bda0 Mon Sep 17 00:00:00 2001
From: Konstantin Kireyev <konstantin.kireyev@onlyoffice.com>
Date: Tue, 15 Oct 2024 19:52:06 +0500
Subject: [PATCH] fix bug 70451

---
 .../main/lib/view/DocumentPropertyDialog.js   |  6 +--
 apps/common/main/resources/less/common.less   | 11 ++++--
 .../main/app/view/FileMenuPanels.js           | 16 ++++----
 .../main/resources/less/filemenu.less         | 39 +++++++++++--------
 .../main/app/view/FileMenuPanels.js           | 20 +++++-----
 .../main/resources/less/leftmenu.less         | 33 +++++++++++-----
 .../main/app/view/FileMenuPanels.js           | 15 +++----
 .../main/resources/less/leftmenu.less         | 33 +++++++++++-----
 8 files changed, 104 insertions(+), 69 deletions(-)

diff --git a/apps/common/main/lib/view/DocumentPropertyDialog.js b/apps/common/main/lib/view/DocumentPropertyDialog.js
index 9768508def..851e9eb911 100644
--- a/apps/common/main/lib/view/DocumentPropertyDialog.js
+++ b/apps/common/main/lib/view/DocumentPropertyDialog.js
@@ -46,12 +46,12 @@ define([], function () { 'use strict';
             }, options);
 
             this.template = [
-                '<div style="display: flex; flex-direction: column; margin: 0 20px; gap: 10px;">',
-                    '<div>',
+                '<div style="display: flex; flex-direction: column; margin: 0 20px;">',
+                    '<div style="margin-bottom: 10px;">',
                         '<label>' + this.txtPropertyTitleLabel + '</label>',
                         '<div id="id-dlg-title"></div>',
                     '</div>',
-                    '<div>',
+                    '<div style="margin-bottom: 10px;">',
                         '<label>' + this.txtPropertyTypeLabel + '</label>',
                         '<div id="id-dlg-type"></div>',
                     '</div>',
diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index 9837109327..022f1b53c0 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -201,7 +201,6 @@ label {
         background-color: @background-toolbar;
         display: flex;
         flex-direction: column;
-        gap: 4px;
         padding: 15px 0 24px;
 
         .rtl & {
@@ -222,6 +221,7 @@ label {
             list-style: none;
             position: relative;
             flex-shrink: 0;
+            margin-bottom: 4px;
 
             &.fm-btn {
                 height: 28px;
@@ -268,12 +268,12 @@ label {
             &.devider {
                 .dropdown-menu .divider;
                 margin-top: 10px;
-                margin-bottom: 10px;
+                margin-bottom: 14px;
             }
 
             &.devider-small {
                 margin-top: 7px;
-                margin-bottom: 7px;
+                margin-bottom: 11px;
             }
 
             &.devider-last {
@@ -303,7 +303,6 @@ label {
                 padding:0;
                 display: flex;
                 align-items: center;
-                gap: 8px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 font-size: 12px;
@@ -317,6 +316,10 @@ label {
                     outline: 0;
                 }
 
+                .menu-item-icon {
+                    .margin-right-8();
+                }
+
                 &:not(:has(.menu-item-icon)) {
                     .padding-left-28();
                 }
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index 662815d94c..5bb413f064 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -1457,19 +1457,17 @@ define([], function () {
                             '<td class="right"><div id="id-info-comment"></div></td>',
                         '</tr>',
                     '</tbody>',
-                '</table>',
-                '<div id="fms-flex-add-property">',
-                    '<table class="main">',
-                        '<tr style="gap: 20px;">',
+                    '<tbody>',
+                        '<tr>',
                             '<td class="left"></td>',
                             '<td class="right">',
-                                '<button id="fminfo-btn-add-property" class="btn" data-hint="2" data-hint-direction="bottom" data-hint-offset="big">',
-                                    '<span>' + this.txtAddProperty + '</span>',
-                                '</button>',
+                            '<button id="fminfo-btn-add-property" class="btn" data-hint="2" data-hint-direction="bottom" data-hint-offset="big">',
+                            '<span>' + this.txtAddProperty + '</span>',
+                            '</button>',
                             '</td>',
                         '</tr>',
-                    '</table>',
-                '</div>',
+                    '</tbody>',
+                '</table>'
             ].join(''));
 
             this.infoObj = {PageCount: 0, WordsCount: 0, ParagraphCount: 0, SymbolsCount: 0, SymbolsWSCount:0};
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index 2140e89c37..74aaff3a17 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -194,13 +194,7 @@
 
 #panel-info {
   #file-menu-panel & {
-    padding: 30px;
-
-    .flex-settings {
-      gap: 30px;
-      display: flex;
-      flex-direction: column;
-    }
+    padding: 0 30px;
   }
 
   .header {
@@ -209,14 +203,17 @@
     line-height: unset;
   }
 
+  table.main {
+    margin: 30px 0 18px;
+  }
+
   table {
     display: flex;
-    gap: 24px;
     flex-direction: column;
 
     tr {
       display: flex;
-      gap: 24px;
+      margin-bottom: 12px;
 
       td {
         .font-size-normal();
@@ -232,8 +229,10 @@
         }
 
         &.left {
+          display: block;
           width: 140px;
           flex-shrink: 0;
+          .margin-right(24px);
         }
 
         &.right {
@@ -248,14 +247,17 @@
 
     tbody {
       display: flex;
-      gap: 12px;
       flex-direction: column;
 
+      &:not(:last-of-type) {
+        margin-bottom: 12px;
+      }
+
       &.properties-tab {
-        gap: 10px;
+        margin-bottom: 0;
 
         tr {
-          gap: 20px;
+          margin-bottom: 10px;
         }
 
         td {
@@ -265,6 +267,7 @@
         td.left {
           display: flex;
           align-items: center;
+          .margin-right-20();
 
           label {
             text-overflow: ellipsis;
@@ -284,8 +287,10 @@
         }
 
         display: flex;
-        gap: 5px;
         align-items: center;
+        & > *:not(:last-child) {
+          .margin-right-5();
+        }
       }
     }
 
@@ -312,15 +317,17 @@
     height: 24px;
 
     span {
-      text-decoration: underline dotted;
-      text-underline-offset: 4px;
+      border-bottom: 1px dotted currentColor;
+      padding-bottom: 2px;
     }
   }
 
   .custom-property-wrapper {
     display: flex;
-    gap: 5px;
     align-items: center;
+    & > *:not(:last-child) {
+      .margin-right-5();
+    }
   }
 
   .tool.close:before, .tool.close:after {
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index 5271bcaa7d..6129947ebc 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -1157,17 +1157,17 @@ define([], function () {
                             '<td class="right"><div id="id-info-comment"></div></td>',
                         '</tr>',
                     '</tbody>',
+                    '<tbody>',
+                        '<tr>',
+                            '<td class="left"></td>',
+                            '<td class="right">',
+                            '<button id="fminfo-btn-add-property" class="btn" data-hint="2" data-hint-direction="bottom" data-hint-offset="big">',
+                            '<span>' + this.txtAddProperty + '</span>',
+                            '</button>',
+                            '</td>',
+                        '</tr>',
+                    '</tbody>',
                 '</table>',
-            '<div id="fms-flex-add-property">',
-                '<table class="main">',
-                    '<tr style="gap: 20px;">',
-                        '<td class="left"></td>',
-                        '<td class="right">',
-                            '<button id="fminfo-btn-add-property" class="btn" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><span>'+ this.txtAddProperty +'</span></button>',
-                        '</td>',
-                    '</tr>',
-                '</table>',
-            '</div>'
             ].join(''));
 
             this.menu = options.menu;
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index c3344a1269..acf0ca8e09 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -512,7 +512,7 @@
         }
 
         #panel-info {
-            padding: 30px;
+            padding: 0 30px;
 
             .header {
                 .font-size-very-huge();
@@ -520,14 +520,17 @@
                 line-height: unset;
             }
 
+            table.main {
+                margin: 30px 0 18px;
+            }
+
             table {
                 display: flex;
-                gap: 24px;
                 flex-direction: column;
 
                 tr {
                     display: flex;
-                    gap: 24px;
+                    margin-bottom: 12px;
 
                     td {
                         .font-size-normal();
@@ -543,8 +546,10 @@
                         }
 
                         &.left {
+                            display: block;
                             width: 140px;
                             flex-shrink: 0;
+                            .margin-right(24px);
                         }
 
                         &.right {
@@ -559,14 +564,17 @@
 
                 tbody {
                     display: flex;
-                    gap: 12px;
                     flex-direction: column;
 
+                    &:not(:last-of-type) {
+                        margin-bottom: 12px;
+                    }
+
                     &.properties-tab {
-                        gap: 10px;
+                        margin-bottom: 0;
 
                         tr {
-                            gap: 20px;
+                            margin-bottom: 10px;
                         }
 
                         td {
@@ -576,6 +584,7 @@
                         td.left {
                             display: flex;
                             align-items: center;
+                            .margin-right-20();
 
                             label {
                                 text-overflow: ellipsis;
@@ -595,8 +604,10 @@
                         }
 
                         display: flex;
-                        gap: 5px;
                         align-items: center;
+                        & > *:not(:last-child) {
+                            .margin-right-5();
+                        }
                     }
                 }
 
@@ -623,15 +634,17 @@
                 height: 24px;
 
                 span {
-                    text-decoration: underline dotted;
-                    text-underline-offset: 4px;
+                    border-bottom: 1px dotted currentColor;
+                    padding-bottom: 2px;
                 }
             }
 
             .custom-property-wrapper {
                 display: flex;
-                gap: 5px;
                 align-items: center;
+                & > *:not(:last-child) {
+                    .margin-right-5();
+                }
             }
 
             .tool.close:before, .tool.close:after {
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index c29c46a4d4..e1b4418cee 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -1628,6 +1628,7 @@ define([], function () {
                         '<td class="left"><label>' + this.txtUploaded + '</label></td>',
                         '<td class="right"><label id="id-info-uploaded">-</label></td>',
                     '</tr>',
+                    '<tr></tr>',
                     '<tr>',
                         '<td class="left"><label>' + this.txtModifyDate + '</label></td>',
                         '<td class="right"><label id="id-info-modify-date"></label></td>',
@@ -1674,17 +1675,17 @@ define([], function () {
                         '<td class="right"><div id="id-info-comment"></div></td>',
                     '</tr>',
                 '</tbody>',
-            '</table>',
-            '<div id="fms-flex-add-property">',
-                '<table class="main">',
-                    '<tr style="gap: 20px;">',
+                '<tbody>',
+                    '<tr>',
                         '<td class="left"></td>',
                         '<td class="right">',
-                            '<button id="fminfo-btn-add-property" class="btn" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><span>'+ this.txtAddProperty +'</span></button>',
+                        '<button id="fminfo-btn-add-property" class="btn" data-hint="2" data-hint-direction="bottom" data-hint-offset="big">',
+                        '<span>' + this.txtAddProperty + '</span>',
+                        '</button>',
                         '</td>',
                     '</tr>',
-                '</table>',
-            '</div>',
+                '</tbody>',
+            '</table>',
             ].join(''));
 
             this.menu = options.menu;
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index e873bb21c3..01e12a4288 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -181,7 +181,7 @@
         }
 
         #panel-info {
-            padding: 30px;
+            padding: 0 30px;
 
             .header {
                 .font-size-very-huge();
@@ -189,14 +189,17 @@
                 line-height: unset;
             }
 
+            table.main {
+                margin: 30px 0 18px;
+            }
+
             table {
                 display: flex;
-                gap: 24px;
                 flex-direction: column;
 
                 tr {
                     display: flex;
-                    gap: 24px;
+                    margin-bottom: 12px;
 
                     td {
                         .font-size-normal();
@@ -212,8 +215,10 @@
                         }
 
                         &.left {
+                            display: block;
                             width: 140px;
                             flex-shrink: 0;
+                            .margin-right(24px);
                         }
 
                         &.right {
@@ -228,14 +233,17 @@
 
                 tbody {
                     display: flex;
-                    gap: 12px;
                     flex-direction: column;
 
+                    &:not(:last-of-type) {
+                        margin-bottom: 12px;
+                    }
+
                     &.properties-tab {
-                        gap: 10px;
+                        margin-bottom: 0;
 
                         tr {
-                            gap: 20px;
+                            margin-bottom: 10px;
                         }
 
                         td {
@@ -245,6 +253,7 @@
                         td.left {
                             display: flex;
                             align-items: center;
+                            .margin-right-20();
 
                             label {
                                 text-overflow: ellipsis;
@@ -264,8 +273,10 @@
                         }
 
                         display: flex;
-                        gap: 5px;
                         align-items: center;
+                        & > *:not(:last-child) {
+                            .margin-right-5();
+                        }
                     }
                 }
 
@@ -292,15 +303,17 @@
                 height: 24px;
 
                 span {
-                    text-decoration: underline dotted;
-                    text-underline-offset: 4px;
+                    border-bottom: 1px dotted currentColor;
+                    padding-bottom: 2px;
                 }
             }
 
             .custom-property-wrapper {
                 display: flex;
-                gap: 5px;
                 align-items: center;
+                & > *:not(:last-child) {
+                    .margin-right-5();
+                }
             }
 
             .tool.close:before, .tool.close:after {