From 5887126ffabc6b4ad4c2d26ca492e1b0d296e4be Mon Sep 17 00:00:00 2001
From: Dmitry-Ilyushechkin <dmitry.ilyushechkin@onlyoffice.com>
Date: Wed, 7 May 2025 15:54:52 +0300
Subject: [PATCH] fix button positioning

---
 .../main/app/controller/DocumentHolderExt.js  | 37 ++++++++++++++++---
 .../main/resources/less/toolbar.less          |  2 +
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/controller/DocumentHolderExt.js b/apps/spreadsheeteditor/main/app/controller/DocumentHolderExt.js
index 4883f7f803..220a7fdcd6 100644
--- a/apps/spreadsheeteditor/main/app/controller/DocumentHolderExt.js
+++ b/apps/spreadsheeteditor/main/app/controller/DocumentHolderExt.js
@@ -1419,7 +1419,7 @@ define([], function () {
                 LabelGroup5 = [14, 15].includes(type);
 
                 if (ComboChart) {
-                    const comboType = chartProps.getSeries()?.[1]?.asc_getChartType(),
+                    const comboType = chartProps.getSeries()?.[0]?.asc_getChartType(),
                         isInGroup1 = [0, 1, 2, 16, 17, 18].includes(comboType),
                         isInGroup2 = [0, 1, 2, 14, 15, 16, 17, 18].includes(comboType),
                         isInGroup3 = [0, 14, 15, 16].includes(comboType),
@@ -3732,16 +3732,41 @@ define([], function () {
                 var x = asc_CRect.asc_getX();
                 var y = asc_CRect.asc_getY();
                 var width = asc_CRect.asc_getWidth();
-                chartContainer.css({
-                    left: (x + width + 10) + 'px', 
-                    top: y + 'px' 
-                }).show();
+                var height = asc_CRect.asc_getHeight();
+                var canvas = documentHolderView.cmpEl.find('#ws-canvas')[0];
+
+                if (canvas) {
+                    var canvasRect = canvas.getBoundingClientRect();
+                    var btnLeft = x + width + 10;
+                    var btnTop = y;
+
+                    if (btnLeft + 50 > canvasRect.width) {
+                        btnLeft = x - 40;
+            
+                        if (btnLeft < 20) {
+                            chartContainer.hide();
+                            return;
+                        }
+                    }
+
+                    if (btnTop + 30 > canvasRect.height) {
+                        btnTop = canvasRect.height - 30; 
+                    }
+
+                    if (btnTop < 18) 
+                        btnTop = 18;
+
+                    chartContainer.css({
+                        left: btnLeft + 'px',
+                        top: btnTop + 'px'
+                    }).show();
+                }
         
                 if (!me.btnChartElement) {
                     me.btnChartElement = new Common.UI.Button({
                         parentEl: $('#id-document-holder-btn-chart-element'),
                         cls: 'btn-toolbar',
-                        iconCls: 'toolbar__icon btn-menu-chart',
+                        iconCls: 'toolbar__icon btn-chart-elements',
                         menu: this.documentHolder.menuChartElement.menu
                     });
         
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index f4bd82c2e9..2df6332f4b 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -84,6 +84,8 @@
 
 #chart-element-container {
     background-color: @background-toolbar;
+    border: var(--scaled-one-pixel, 1px) solid var(--border-regular-control);
+    border-radius: 3px;
 }
 
 #special-paste-container,