From 8a4eb4f8ad9e41ec9216d12e2d64f8c817356ae9 Mon Sep 17 00:00:00 2001
From: Pravesh Sharma <pravesh.sharma@enterprisedb.com>
Date: Mon, 28 Jul 2025 16:27:31 +0530
Subject: [PATCH] Fixed an issue in Firefox where the query window would shift
 to the left after opening the history tab or selecting a column header in the
 results grid. #8756

---
 web/pgadmin/static/js/utils.js                        | 11 -----------
 .../static/js/components/QueryToolDataGrid/index.jsx  |  7 +++----
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/web/pgadmin/static/js/utils.js b/web/pgadmin/static/js/utils.js
index 0b8b99ab7..065d16bf7 100644
--- a/web/pgadmin/static/js/utils.js
+++ b/web/pgadmin/static/js/utils.js
@@ -560,17 +560,6 @@ export function requestAnimationAndFocus(ele) {
   });
 }
 
-export function measureText(text, font) {
-  if(!measureText.ele) {
-    measureText.ele = document.createElement('div');
-    measureText.ele.style.cssText = `position: absolute; visibility: hidden; white-space: nowrap; font: ${font}`;
-    document.body.appendChild(measureText.ele);
-  }
-  measureText.ele.textContent = text;
-  const dim = measureText.ele.getBoundingClientRect();
-  return {width: dim.width, height: dim.height};
-}
-
 const CHART_THEME_COLORS = {
   'light':['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B',
     '#E377C2', '#7F7F7F', '#BCBD22', '#17BECF', '#3366CC', '#DC3912', '#FF9900',
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
index d548b7bc8..bf2f95ce1 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
@@ -23,7 +23,6 @@ import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import PgReactDataGrid from '../../../../../../static/js/components/PgReactDataGrid';
 import { isMac } from '../../../../../../static/js/keyboard_shortcuts';
-import { measureText } from '../../../../../../static/js/utils';
 
 export const ROWNUM_KEY = '$_pgadmin_rownum_key_$';
 export const GRID_ROW_SELECT_KEY = '$_pgadmin_gridrowselect_key_$';
@@ -338,7 +337,7 @@ function formatColumns(columns, dataChangeStore, selectedColumns, onColumnSelect
   return retColumns;
 }
 
-function getColumnWidth(column, rows, canvas, columnWidthBy, maxColumnDataDisplayLength) {
+function getColumnWidth(column, rows, canvasContext, columnWidthBy, maxColumnDataDisplayLength) {
   const dataWidthReducer = (longest, nextRow) => {
     let value = nextRow[column.key];
     if(_.isNull(value) || _.isUndefined(value)) {
@@ -353,7 +352,7 @@ function getColumnWidth(column, rows, canvas, columnWidthBy, maxColumnDataDispla
   };
 
   let columnHeaderLen = column.display_name.length > column.display_type.length ?
-    measureText(column.display_name, '12px Roboto').width : measureText(column.display_type, '12px Roboto').width;
+    canvasContext.measureText(column.display_name).width : canvasContext.measureText(column.display_type).width;
   /* padding 12,  margin 4, icon-width 15, */
   columnHeaderLen += 15 + 12 + 4;
   if(column.column_type_internal == 'geometry' || column.column_type_internal == 'geography') {
@@ -362,7 +361,7 @@ function getColumnWidth(column, rows, canvas, columnWidthBy, maxColumnDataDispla
   let width = columnHeaderLen;
   if(typeof(columnWidthBy) == 'number') {
     /* padding 16, border 1px */
-    width = 16 + measureText(rows.reduce(dataWidthReducer, ''), '12px Roboto').width + 1;
+    width = 16 + canvasContext.measureText(rows.reduce(dataWidthReducer, '')).width + 1;
     if(width > columnWidthBy && columnWidthBy > 0) {
       width = columnWidthBy;
     }