Fixed CSS issue found during testing of issue 6510

docs/en_US/preferences.rst

@@ -543,8 +543,8 @@ preferences for copied data.
 * Specify the number of records to fetch in one batch. Changing this value will
   override DATA_RESULT_ROWS_PER_PAGE setting from config file.
 * Use the *Max column data display length* to specify the maximum number of
-  characters to display in a cell. If the data is larger than this value, it
-  will be truncated.
+  characters to be visible in the data output cell. If the data is larger 
+  than this value, it will be truncated.
 * Use the *Result copy field separator* drop-down listbox to select the field
   separator for copied data.
 * Use the *Result copy quote character* drop-down listbox to select the quote

web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js

@@ -165,16 +165,23 @@ export default function jsonEditorOverride(theme) {
       '--jse-svelte-select-background': theme.palette.background.default,
       '--list-background': theme.palette.background.default,
       '--item-is-active-color': theme.palette.primary.contrastText,
-      '--item-hover-bg': theme.palette.primary.hoverMain,
+      '--jse-hover-background-color': theme.palette.primary.hoverMain,
+    },
+    '.svelte-select .svelte-select-list .list-item:hover': {
+      '--item-hover-bg': theme.palette.primary.main,
+      '--item-hover-color': theme.palette.primary.contrastText,
     },
-
     /* Body */
     '.jse-modal-contents': {
       '--jse-modal-background': theme.palette.background.default,
     },
 
     '.jse-transform-modal-inner textarea': {
-      ' --jse-input-background': theme.palette.background.default,
+      '--jse-input-background': theme.palette.background.default,
+    },
+
+    '.jse-filter-value': {
+      '--jse-input-background': theme.palette.background.default,
     },
 
     '.jse-contextmenu': {
@@ -200,7 +207,37 @@ export default function jsonEditorOverride(theme) {
       '--jse-value-color-boolean': 'darkorange',
       '--jse-value-color-string': theme.otherVars.editor.string,
       '--jse-value-color-null': theme.otherVars.editor.keyword,
-      '--jse-delimiter-color': theme.palette.text.primary
+      '--jse-delimiter-color': theme.palette.text.primary,
+      '--jse-font-family-mono': theme.typography.fontFamilySourceCode
+    },
+    '.jse-text-mode .jse-contents .cm-editor .cm-selectionBackground': {
+      '--jse-selection-background-color': theme.otherVars.editor.selectionBg,
+    },
+
+    '.jse-main:not(.jse-focus)': {
+      '--jse-selection-background-inactive-color': theme.otherVars.editor.selectionBg,
+    },
+
+    '.jse-table-mode .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-header, .jse-table-mode.jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-gutter': {
+      '--jse-table-header-background': theme.otherVars.editor.guttersBg,
+      '--jse-text-readonly': theme.otherVars.editor.guttersFg,
+    },
+
+    '.jse-table-mode .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-gutter': {
+      '--jse-table-header-background': theme.otherVars.editor.guttersBg,
+      '--jse-text-readonly': theme.otherVars.editor.guttersFg,
+    },
+
+    '.jse-column-header:hover': {
+      '--jse-table-header-background-highlight': theme.palette.primary.hoverMain,
+    },
+
+    '.jse-json-node.jse-selected-value .jse-value-outer, .jse-json-node.jse-selected-value .jse-meta, .jse-json-node.jse-selected-value .jse-items .jse-header, .jse-json-node.jse-selected-value .jse-items .jse-contents, .jse-json-node.jse-selected-value .jse-props .jse-header, .jse-json-node.jse-selected-value .jse-props .jse-contents, .jse-json-node.jse-selected-value .jse-footer': {
+      '--jse-selection-background-color': theme.otherVars.editor.selectionBg,
+    },
+    
+    '.jse-json-node.jse-selected .jse-header, .jse-json-node.jse-selected .jse-contents, .jse-json-node.jse-selected .jse-footer': {
+      '--jse-selection-background-color': theme.otherVars.editor.selectionBg,
     }
   };
 }

web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx

@@ -89,8 +89,8 @@ const StyledEditorDiv = styled(Box)(({ theme }) => ({
     padding: '0.25rem',
     '& .jsoneditor-div': {
       fontSize: '12px',
-      minWidth: '525px',
-      minHeight: '300px',
+      minWidth: '200px',
+      minHeight: '200px',
       ...theme.mixins.panelBorder.all,
       outline: 0,
       resize: 'both',
@@ -102,7 +102,7 @@ const StyledEditorDiv = styled(Box)(({ theme }) => ({
   },
 }));
 
-const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
+const ResizableDiv = ({columnIndex, children, resizeKey, defaultSize, ...otherProps}) => {
 
   const editorRef = React.useRef(null);
   const {getCellElement} = useContext(RowInfoContext);
@@ -124,11 +124,24 @@ const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
       if (box.right > innerWidth) {
         editorRef.current.firstChild.style.width = `${currentWidth - widthDiff - 20}px`;
       }
+      // logic to save the height and width of the editor
+      if (currentHeight || currentWidth) {
+        window.resizeKeys = window.resizeKeys || {};
+        window.resizeKeys[resizeKey] = {height: editorRef.current.firstChild.style.height, width: editorRef.current.firstChild.style.width};
+      }
+
     };
 
     editorRef.current.addEventListener('mousedown', () => {
       document.addEventListener('mouseup', resizeEditor, {once: true});
     });
+    // Fetch the saved height and width from window object
+    editorRef.current.firstChild.style.height = window.resizeKeys?.[resizeKey]?.height || defaultSize.height;
+    editorRef.current.firstChild.style.width = window.resizeKeys?.[resizeKey]?.width || defaultSize.width;
+
+    // set initial position of editor and resize if it goes beyond visible area.
+    setEditorPosition(getCellElement(columnIndex), editorRef.current, '.rdg', 12);
+    resizeEditor();
 
     return () => document.removeEventListener('mouseup', resizeEditor);
 
@@ -137,7 +150,6 @@ const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
   return (
     <StyledEditorDiv ref={(ele)=>{
       editorRef.current = ele;
-      setEditorPosition(getCellElement(columnIndex), ele, '.rdg', 12);
     }} {...otherProps}>
       {children}
     </StyledEditorDiv>
@@ -146,7 +158,9 @@ const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
 ResizableDiv.displayName = 'ResizableDiv';
 ResizableDiv.propTypes = {
   children: CustomPropTypes.children,
-  columnIndex: PropTypes.number
+  columnIndex: PropTypes.number,
+  resizeKey: PropTypes.string,
+  defaultSize: PropTypes.object,
 };
 
 function autoFocusAndSelect(input) {
@@ -249,7 +263,7 @@ export function TextEditor({row, column, onRowChange, onClose}) {
   return (
     <Portal container={document.body}>
       <ResizableDiv columnIndex={column.idx}
-        className='Editors-textEditor' data-label="pg-editor" onKeyDown={suppressEnterKey} >
+        className='Editors-textEditor' data-label="pg-editor" resizeKey={'text'} defaultSize={{height:'80px', width:'250px'}} onKeyDown={suppressEnterKey} >
         <textarea ref={autoFocusAndSelect} className='Editors-textarea' value={localVal} onChange={onChange} onKeyDown={onkeydown} />
         <Box display="flex" justifyContent="flex-end">
           <DefaultButton startIcon={<CloseIcon />} onClick={()=>onClose(false)} size="small">
@@ -436,7 +450,7 @@ export function JsonTextEditor({row, column, onRowChange, onClose}) {
   return (
     <Portal container={document.body}>
       <ResizableDiv columnIndex={column.idx}
-        className='Editors-jsonEditor' data-label="pg-editor" onKeyDown={suppressEnterKey} >
+        className='Editors-jsonEditor' data-label="pg-editor" resizeKey={'json'} defaultSize={{height:'500px', width:'600px'}} onKeyDown={suppressEnterKey} >
         <JsonEditor
           setJsonEditorSize={setJsonEditorSize}
           value={localVal}

web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py

@@ -379,8 +379,8 @@ def register_query_tool_preferences(self):
         'Results_grid', 'max_column_data_display_length',
         gettext("Max column data display length"), 'integer',
         200, category_label=PREF_LABEL_RESULTS_GRID,
-        help_str=gettext('Maximum number of characters to display in the'
-                         ' data preview.')
+        help_str=gettext('Maximum number of characters to be visible in the'
+                         ' data output cell.')
     )
 
     self.sql_font_size = self.preference.register(