Fixed bugs found while testing makeStyles JSS changes. #7363

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/__init__.py

@@ -580,7 +580,7 @@ class RuleView(PGChildNodeView, SchemaDiffObjectCompare):
 
         return sql
 
-    @ staticmethod
+    @staticmethod
     def _check_schema_diff(target_schema, res_data):
         """
         Check for schema diff, if yes then replace source schema with target

web/pgadmin/misc/cloud/static/js/aws.js

@@ -8,7 +8,6 @@
 //////////////////////////////////////////////////////////////
 
 import React from 'react';
-import { styled } from '@mui/material/styles';
 import pgAdmin from 'sources/pgadmin';
 import { getNodeAjaxOptions, getNodeListById } from 'pgbrowser/node_ajax';
 import {CloudInstanceDetailsSchema, CloudDBCredSchema, DatabaseSchema} from './aws_schema.ui';
@@ -19,13 +18,6 @@ import { isEmptyString } from 'sources/validators';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 
-const StyledSchemaView= styled(SchemaView)(() =>
-  ({
-    '& .aws-formClass': {
-      overflow: 'auto',
-    }
-  }));
-
 // AWS credentials
 export function AwsCredentials(props) {
   const [cloudDBCredInstance, setCloudDBCredInstance] = React.useState();
@@ -113,7 +105,7 @@ export function AwsInstanceDetails(props) {
   }, [props.cloudProvider]);
 
 
-  return  <StyledSchemaView
+  return  <SchemaView
     formType={'dialog'}
     getInitData={() => { /*This is intentional (SonarQube)*/ }}
     viewHelperProps={{ mode: 'create' }}
@@ -123,7 +115,6 @@ export function AwsInstanceDetails(props) {
     onDataChange={(isChanged, changedData) => {
       props.setCloudInstanceDetails(changedData);
     }}
-    formClassName='aws-formClass'
   />;
 }
 AwsInstanceDetails.propTypes = {

web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx

@@ -65,6 +65,9 @@ const StyledBox = styled(Box)(({theme}) => ({
         height: '100%',
         paddingTop: '5px',
         overflow: 'auto',
+        '& .PreferencesComponent-preferencesContainerBackground': {
+          backgroundColor: theme.palette.background.default,
+        }
       },
     },
     '& .PreferencesComponent-footer': {
@@ -123,6 +126,7 @@ function RightPanel({ schema, ...props }) {
       schema={schema}
       showFooter={false}
       isTabView={false}
+      formClassName='PreferencesComponent-preferencesContainerBackground'
       onDataChange={(isChanged, changedData) => {
         props.onDataChange(changedData);
       }}

web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx

@@ -1,4 +1,3 @@
-import { styled } from '@mui/material/styles';
 import React from 'react';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
@@ -6,13 +5,6 @@ import BaseUISchema from '../SchemaView/base_schema.ui';
 import SchemaView from '../SchemaView';
 import { isEmptyString } from 'sources/validators';
 
-
-const StyledSchemaView = styled(SchemaView)(({theme}) => ({
-  '& .ChangeOwnershipContent-root': {
-    ...theme.mixins.tabPanel,
-  }
-}));
-
 class ChangeOwnershipSchema extends BaseUISchema {
   constructor(deletedUser, adminUserList, noOfSharedServers) {
     super({
@@ -52,7 +44,7 @@ export default function ChangeOwnershipContent({onSave, onClose, deletedUser, us
 
   const objChangeOwnership = new ChangeOwnershipSchema(deletedUser, userList, noOfSharedServers);
 
-  return <StyledSchemaView
+  return <SchemaView
     formType={'dialog'}
     getInitData={() => { /*This is intentional (SonarQube)*/ }}
     schema={objChangeOwnership}
@@ -66,7 +58,6 @@ export default function ChangeOwnershipContent({onSave, onClose, deletedUser, us
     disableSqlHelp={true}
     disableDialogHelp={true}
     isTabView={false}
-    formClassName='ChangeOwnershipContent-root'
   />;
 }
 ChangeOwnershipContent.propTypes = {

web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx

@@ -1,16 +1,9 @@
-import { styled } from '@mui/material/styles';
 import React from 'react';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import BaseUISchema from '../SchemaView/base_schema.ui';
 import SchemaView from '../SchemaView';
 
-const StyledSchemaView = styled(SchemaView )(({theme}) => ({
-  '& .ChangePasswordContent-root': {
-    ...theme.mixins.tabPanel,
-  }
-}));
-
 class ChangePasswordSchema extends BaseUISchema {
   constructor(user, isPgpassFileUsed, hasCsrfToken=false, showUser=true) {
     super({
@@ -72,7 +65,7 @@ class ChangePasswordSchema extends BaseUISchema {
 
 export default function ChangePasswordContent({getInitData=() => { /*This is intentional (SonarQube)*/ },
   onSave, onClose, hasCsrfToken=false, showUser=true}) {
-  return <StyledSchemaView
+  return <SchemaView
     formType={'dialog'}
     getInitData={getInitData}
     schema={new ChangePasswordSchema('', false, hasCsrfToken, showUser)}
@@ -86,7 +79,6 @@ export default function ChangePasswordContent({getInitData=() => { /*This is int
     disableSqlHelp={true}
     disableDialogHelp={true}
     isTabView={false}
-    formClassName='ChangePasswordContent-root'
   />;
 }
 ChangePasswordContent.propTypes = {

web/pgadmin/static/js/Explain/Analysis.jsx

@@ -31,6 +31,10 @@ const StyledTable = styled(Table)(({theme}) => ({
     backgroundColor: theme.otherVars.explain.sev4.bg,
     color: theme.otherVars.explain.sev4.color,
   },
+  '& .Analysis-header': {
+    border: 'none',
+    background: 'none'
+  }
 }));
 
 function getRowClassname(data, collapseParent) {
@@ -161,29 +165,29 @@ export default function Analysis({explainTable}) {
       <thead>
         <tr>
           <th rowSpan="2" style={{width: '30px'}}></th>
-          <th rowSpan="2"><button disabled="">#</button></th>
-          <th rowSpan="2"><button disabled="">Node</button></th>
+          <th rowSpan="2"><button className='Analysis-header' disabled="">#</button></th>
+          <th rowSpan="2"><button className='Analysis-header'  disabled="">Node</button></th>
           <th colSpan="2" style={explainTable.show_timings ? {} : {display: 'none'}}>
-            <button disabled="">{gettext('Timings')}</button>
+            <button className='Analysis-header' disabled="">{gettext('Timings')}</button>
           </th>
           <th style={(explainTable.show_rowsx || explainTable.show_rows || explainTable.show_plan_rows) ? {} : {display: 'none'}}
             colSpan={(explainTable.show_rowsx) ? '3' : '1'}>
-            <button disabled="">{gettext('Rows')}</button>
+            <button className='Analysis-header' disabled="">{gettext('Rows')}</button>
           </th>
           <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}} rowSpan="2">
-            <button disabled="">{gettext('Loops')}</button>
+            <button className='Analysis-header' disabled="">{gettext('Loops')}</button>
           </th>
         </tr>
         <tr>
           <th style={explainTable.show_timings ? {} : {display: 'none'}}>
-            <button disabled="">{gettext('Exclusive')}</button>
+            <button className='Analysis-header' disabled="">{gettext('Exclusive')}</button>
           </th>
           <th style={explainTable.show_timings ? {} : {display: 'none'}}>
-            <button disabled="">{gettext('Inclusive')}</button>
+            <button className='Analysis-header' disabled="">{gettext('Inclusive')}</button>
           </th>
-          <th style={explainTable.show_rowsx ? {} : {display: 'none'}}><button disabled="">{gettext('Rows X')}</button></th>
-          <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}}><button disabled="">{gettext('Actual')}</button></th>
-          <th style={(explainTable.show_rowsx || explainTable.show_plan_rows) ? {} : {display: 'none'}}><button disabled="">{gettext('Plan')}</button></th>
+          <th style={explainTable.show_rowsx ? {} : {display: 'none'}}><button className='Analysis-header' disabled="">{gettext('Rows X')}</button></th>
+          <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}}><button className='Analysis-header' disabled="">{gettext('Actual')}</button></th>
+          <th style={(explainTable.show_rowsx || explainTable.show_plan_rows) ? {} : {display: 'none'}}><button className='Analysis-header' disabled="">{gettext('Plan')}</button></th>
         </tr>
       </thead>
       <tbody>

web/pgadmin/static/js/SchemaView/FormView.jsx

@@ -52,7 +52,7 @@ const StyledBox = styled(Box)(({theme}) => ({
     }
   },
   '& .FormView-nonTabPanel': {
-    backgroundColor: 'inherit',
+    ...theme.mixins.tabPanel,
     '& .FormView-nonTabPanelContent': {
       height: 'unset',
       '& .FormView-controlRow': {
@@ -466,7 +466,7 @@ export default function FormView({
     let contentClassName = ['FormView-nonTabPanelContent', (stateUtils.formErr.message ? 'FormView-errorMargin' : null)];
     return (
       <StyledBox height="100%" display="flex" flexDirection="column" className={className} ref={formRef} data-test="form-view">
-        <TabPanel value={tabValue} index={0} classNameRoot='FormView-nonTabPanel'
+        <TabPanel value={tabValue} index={0} classNameRoot={['FormView-nonTabPanel',className].join(' ')}
           className={contentClassName.join(' ')}>
           {Object.keys(finalTabs).map((tabName)=>{
             return (

web/pgadmin/static/js/components/FormComponents.jsx

@@ -1068,12 +1068,14 @@ const ColorButton = withColorPicker(PgIconButton);
 export function InputColor({ value, controlProps, disabled, onChange, currObj }) {
   let btnStyles = { backgroundColor: value };
   return (
-    <ColorButton title={gettext('Select the color')} className='Form-colorBtn' style={btnStyles} disabled={disabled}
-      icon={(_.isUndefined(value) || _.isNull(value) || value === '') && <CloseIcon data-label="CloseIcon" />} options={{
-        ...controlProps,
-        disabled: disabled
-      }} onChange={onChange} value={value} currObj={currObj}
-    />
+    <Root>
+      <ColorButton title={gettext('Select the color')} className='Form-colorBtn' style={btnStyles} disabled={disabled}
+        icon={(_.isUndefined(value) || _.isNull(value) || value === '') && <CloseIcon data-label="CloseIcon" />} options={{
+          ...controlProps,
+          disabled: disabled
+        }} onChange={onChange} value={value} currObj={currObj}
+      />
+    </Root>
   );
 }
 InputColor.propTypes = {

web/pgadmin/static/js/components/Menu.jsx

@@ -69,7 +69,7 @@ export const PgMenuItem = applyStatics(MenuItem)(({hasCheck=false, checked=false
   return <MenuItem {...props} onClick={onClick} data-label={dataLabel} data-checked={checked}>
     {hasCheck && <CheckIcon  style={checked ? {} : {visibility: 'hidden', width: '1.3rem'}} data-label="CheckIcon"/>}
     {children}
-    <div>
+    <div style={{ marginLeft:'auto', fontSize:'0.8em', paddingLeft:'12px'}}>
       {keyVal ? `(${keyVal})` : ''}
     </div>
   </MenuItem>;

web/pgadmin/static/js/components/PgReactDataGrid.jsx

@@ -24,7 +24,7 @@ const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({
     fontSize: '12px',
     border: 'none',
     '--rdg-selection-color': theme.palette.primary.main,
-    '&.rdg-cell': {
+    '& .rdg-cell': {
       ...theme.mixins.panelBorder.right,
       ...theme.mixins.panelBorder.bottom,
       fontWeight: 'abc',
@@ -43,7 +43,7 @@ const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({
     '& .rdg-header-row': {
       backgroundColor: theme.palette.background.default,
     },
-    '&.rdg-row': {
+    '& .rdg-row': {
       backgroundColor: theme.palette.background.default,
       '&[aria-selected=true]': {
         backgroundColor: theme.palette.primary.light,

web/pgadmin/static/js/helpers/wizard/Wizard.jsx

@@ -174,24 +174,24 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
 
   return (
     <StyledBox>
-      <div className={'Wizard-root ' + (props?.rootClass ? props.rootClass : '') }>
-        <div className={'Wizard-body ' + className}>
+      <div className={['Wizard-root', (props?.rootClass ? props.rootClass : '')].join(' ') }>
+        <div className={['Wizard-body', className].join(' ') }>
           <Box className='Wizard-leftPanel'>
             {steps.map((label, index) => (
-              <Box key={label} className={'Wizard-stepLabel ' + (index === activeStep ? 'Wizard-active' : '')}>
-                <Box className={'Wizard-stepIndex ' + (index === activeStep ? 'Wizard-activeIndex' : '')}>{index + 1}</Box>
+              <Box key={label} className={['Wizard-stepLabel', (index === activeStep ? 'Wizard-active' : '')].join(' ') }>
+                <Box className={['Wizard-stepIndex', (index === activeStep ? 'Wizard-activeIndex' : '')].join(' ') }>{index + 1}</Box>
                 <Box className='Wizard-label'>{label} </Box>
                 <Box className='Wizard-labelArrow'>{index === activeStep ? <ChevronRightIcon /> : null}</Box>
                 <Box className='Wizard-labelDone'>{index < activeStep ? <DoneIcon />: null}</Box>
               </Box>
             ))}
           </Box>
-          <div className={'Wizard-rightPanel ' + props.stepPanelCss}>
+          <div className={['Wizard-rightPanel', props.stepPanelCss].join(' ') }>
             <Loader message={props?.loaderText} />
             {
               React.Children.map(props.children, (child) => {
                 return (
-                  <div className={'Wizard-stepDefaultStyle ' + child.props.className + ' ' +(child.props.stepId !== activeStep ? 'Wizard-hidden' : '')}>
+                  <div className={['Wizard-stepDefaultStyle', child.props.className, (child.props.stepId !== activeStep ? 'Wizard-hidden' : '')].join(' ') }>
                     {child}
                   </div>
                 );

web/pgadmin/tools/import_export_servers/static/js/ImportExportServers.jsx

@@ -25,7 +25,7 @@ import PropTypes from 'prop-types';
 import pgAdmin from 'sources/pgadmin';
 import Table from '../../../../static/js/components/Table';
 
-const StyledBox = styled(Box)(() =>
+const StyledBox = styled(Box)(({theme}) =>
   ({
     height: '100%',
     '& .ImportExportServers-noOverflow': {
@@ -45,6 +45,9 @@ const StyledBox = styled(Box)(() =>
       '& .ImportExportServers-noteContainer': {
         marginTop: '5px',
       }
+    },
+    '& .ImportExportServers-Background':{
+      backgroundColor: theme.palette.background.default + ' !important',
     }
   }));
 
@@ -215,6 +218,7 @@ export default function ImportExportServers({onClose}) {
             schema={new ImportExportSelectionSchema()}
             showFooter={false}
             isTabView={false}
+            formClassName='ImportExportServers-Background'
             onDataChange={(isChanged, changedData) => {
               setSelectionFormData(changedData);
             }}

web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx

@@ -18,11 +18,16 @@ import url_for from 'sources/url_for';
 import Loader from 'sources/components/Loader';
 import getApiInstance, { parseApiError } from '../../../../static/js/api_instance';
 import { PrimaryButton, PgIconButton } from '../../../../static/js/components/Buttons';
-import { ModalContent } from '../../../../static/js/components/ModalContent';
 import { FormFooterMessage, InputSelect, InputText, MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
 import PgReactDataGrid from '../../../../static/js/components/PgReactDataGrid';
 
 const StyledBox = styled(Box)(({theme}) => ({
+  display:'flex',
+  flexGrow: '1',
+  flexDirection:'column',
+  position:'relative',
+  overflow:'hidden',
+  height: '100%',
   '& .SearchObjects-toolbar': {
     padding: '4px',
     display: 'flex',
@@ -41,7 +46,7 @@ const StyledBox = styled(Box)(({theme}) => ({
     alignItems: 'center',
     borderTop: `1px solid ${theme.otherVars.inputBorderColor}`,
   },
-  '&.SearchObjects-footer': {
+  '& .SearchObjects-footer': {
     borderTop: `1px solid ${theme.otherVars.inputBorderColor} !important`,
     padding: '0.5rem',
     display: 'flex',
@@ -393,46 +398,44 @@ export default function SearchObjects({nodeData}) {
   };
 
   return (
-    <ModalContent>
-      <StyledBox>
-        <Loader message={loaderText} />
-        <Box className='SearchObjects-toolbar'>
-          <InputText type="search" className='SearchObjects-inputSearch' data-label="search" placeholder={gettext('Type at least 3 characters')} value={search} onChange={setSearch} onKeyPress={onEnterPress} autoFocus/>
-          <Box sx={{marginLeft: '4px', width: '50%'}}>
-            <InputSelect value={type} controlProps={{allowClear: false}} options={typeOptions} onChange={(v)=>setType(v)}/>
-          </Box>
-          <PrimaryButton style={{width: '120px'}} data-test="search" className='SearchObjects-Btnmargin' startIcon={<SearchRoundedIcon />}
-            onClick={onSearch} disabled={search.length < 3}>{gettext('Search')}</PrimaryButton>
+    <StyledBox>
+      <Loader message={loaderText} />
+      <Box className='SearchObjects-toolbar'>
+        <InputText type="search" className='SearchObjects-inputSearch' data-label="search" placeholder={gettext('Type at least 3 characters')} value={search} onChange={setSearch} onKeyPress={onEnterPress} autoFocus/>
+        <Box sx={{marginLeft: '4px', width: '50%'}}>
+          <InputSelect value={type} controlProps={{allowClear: false}} options={typeOptions} onChange={(v)=>setType(v)}/>
         </Box>
-        <Box flexGrow="1" display="flex" flexDirection="column" position="relative" overflow="hidden">
-          <PgReactDataGrid
-            id="searchobjects"
-            className='SearchObjects-grid'
-            hasSelectColumn={false}
-            columns={columns}
-            rows={sortedItems}
-            defaultColumnOptions={{
-              enableSorting: true,
-              enableResizing: true
-            }}
-            headerRowHeight={28}
-            rowHeight={28}
-            mincolumnWidthBy={25}
-            enableCellSelect={false}
-            sortColumns={sortColumns}
-            onSortColumnsChange={setSortColumns}
-            onItemEnter={onItemEnter}
-          />
-        </Box>
-        <Box className='SearchObjects-footer1'>
-          <Box>{footerText}</Box>
-        </Box>
-        <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={errorMsg} closable onClose={()=>setErrorMsg('')}  />
-      </StyledBox>
-      <StyledBox className='SearchObjects-footer'>
+        <PrimaryButton style={{width: '120px'}} data-test="search" className='SearchObjects-Btnmargin' startIcon={<SearchRoundedIcon />}
+          onClick={onSearch} disabled={search.length < 3}>{gettext('Search')}</PrimaryButton>
+      </Box>
+      <Box flexGrow="1" display="flex" flexDirection="column" position="relative" overflow="hidden">
+        <PgReactDataGrid
+          id="searchobjects"
+          className='SearchObjects-grid'
+          hasSelectColumn={false}
+          columns={columns}
+          rows={sortedItems}
+          defaultColumnOptions={{
+            enableSorting: true,
+            enableResizing: true
+          }}
+          headerRowHeight={28}
+          rowHeight={28}
+          mincolumnWidthBy={25}
+          enableCellSelect={false}
+          sortColumns={sortColumns}
+          onSortColumnsChange={setSortColumns}
+          onItemEnter={onItemEnter}
+        />
+      </Box>
+      <Box className='SearchObjects-footer1'>
+        <Box>{footerText}</Box>
+      </Box>
+      <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={errorMsg} closable onClose={()=>setErrorMsg('')}  />
+      <Box className='SearchObjects-footer'>
         <PgIconButton data-test="dialog-help" onClick={onDialogHelp} icon={<HelpIcon />} title={gettext('Help for this dialog.')} />
-      </StyledBox>
-    </ModalContent>
+      </Box>
+    </StyledBox>
   );
 }
 

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

@@ -42,7 +42,7 @@ const StyledEditorDiv = styled(Box)(({ theme }) => ({
       },
     },
   },
-  '&.Editors-input': {
+  '& .Editors-input': {
     appearance: 'none',
     width: '100%',
     height: '100%',
@@ -312,7 +312,7 @@ export function NumberEditor({row, column, onRowChange, onClose}) {
     }
   };
   return (
-    <StyledEditorDiv>
+    <StyledEditorDiv height={'100%'}>
       <input
         className='Editors-input'
         ref={autoFocusAndSelect}

web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx

@@ -7,11 +7,12 @@ import { QueryToolContext, getRandomName } from '../QueryToolComponent';
 import url_for from 'sources/url_for';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
 
-const StyledSchemaView = styled(SchemaView)(({theme}) => ({
+const StyledBox = styled(Box)(() => ({
+  height: '100%',
   '& .MacrosDialog-root': {
-    ...theme.mixins.tabPanel,
-    padding: 0,
+    padding: 0 + ' !important',
   }
 }));
 
@@ -185,26 +186,28 @@ export default function MacrosDialog({onClose, onSave}) {
   }
 
   return (
-    <StyledSchemaView
-      formType={'dialog'}
-      getInitData={()=>{
-        if(macrosErr) {
-          return Promise.reject(new Error(macrosErr));
-        }
-        return Promise.resolve({macro: userMacrosData.filter((m)=>Boolean(m.name))});
-      }}
-      schema={new MacrosSchema(keyOptions)}
-      viewHelperProps={{
-        mode: 'edit',
-      }}
-      onSave={onSaveClick}
-      onClose={onClose}
-      hasSQL={false}
-      disableSqlHelp={true}
-      disableDialogHelp={true}
-      isTabView={false}
-      formClassName='MacrosDialog-root'
-    />
+    <StyledBox>
+      <SchemaView
+        formType={'dialog'}
+        getInitData={()=>{
+          if(macrosErr) {
+            return Promise.reject(new Error(macrosErr));
+          }
+          return Promise.resolve({macro: userMacrosData.filter((m)=>Boolean(m.name))});
+        }}
+        schema={new MacrosSchema(keyOptions)}
+        viewHelperProps={{
+          mode: 'edit',
+        }}
+        onSave={onSaveClick}
+        onClose={onClose}
+        hasSQL={false}
+        disableSqlHelp={true}
+        disableDialogHelp={true}
+        isTabView={false}
+        formClassName='MacrosDialog-root'
+      />
+    </StyledBox>
   );
 }
 

web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx

@@ -27,6 +27,8 @@ const Root = styled('div')(({ theme }) => ({
   display: 'flex',
   height: '100%',
   '.QuerySources-leftRoot': {
+    flexBasis: '50%',
+    maxWidth: '50%',
     display: 'flex',
     flexDirection: 'column',
     backgroundColor: theme.otherVars.editorToolbarBg,
@@ -34,7 +36,10 @@ const Root = styled('div')(({ theme }) => ({
     '& .QuerySources-header': {
       padding: '0.25rem',
       display: 'flex',
-      flexWrap: 'wrap'
+      flexWrap: 'wrap',
+      '& .QuerySources-removeBtnMargin': {
+        marginLeft: '0.25rem',
+      },
     },
     '& .QuerySources-listRoot': {
       ...theme.mixins.panelBorder.top,
@@ -79,9 +84,6 @@ const Root = styled('div')(({ theme }) => ({
     '& .QuerySources-queryMargin': {
       marginTop: '12px',
     },
-    '& .QuerySources-removeBtnMargin': {
-      marginLeft: '0.25rem',
-    },
   },
   '& .QuerySources-infoHeader': {
     fontSize: '13px',
@@ -266,7 +268,7 @@ QuerySourceIcon.propTypes = {
 };
 
 function HistoryEntry({entry, formatEntryDate, itemKey, selectedItemKey, onClick}) {
-  return <Root><ListItem tabIndex="0" data-label="history-entry" data-pgadmin={entry.is_pgadmin_query} ref={(ele)=>{
+  return <ListItem tabIndex="0" data-label="history-entry" data-pgadmin={entry.is_pgadmin_query} ref={(ele)=>{
     selectedItemKey==itemKey && ele?.scrollIntoView({
       block: 'center',
       behavior: 'smooth',
@@ -279,8 +281,7 @@ function HistoryEntry({entry, formatEntryDate, itemKey, selectedItemKey, onClick
     <Box fontSize="12px">
       {formatEntryDate(entry.start_time)}
     </Box>
-  </ListItem>
-  </Root>;
+  </ListItem>;
 }
 
 const EntryPropType = PropTypes.shape({
@@ -321,15 +322,13 @@ function QueryHistoryDetails({entry}) {
   }, [entry]);
 
   if(!entry) {
-    return <Root>
-      <Box display="flex" height="100%">
-        <EmptyPanelMessage text={gettext('Select an history entry to see details.')} />
-      </Box>
-    </Root>;
+    return <Box display="flex" height="100%">
+      <EmptyPanelMessage text={gettext('Select an history entry to see details.')} />
+    </Box>;
   }
 
   return (
-    <Root>
+    <>
       {entry.info && <Box className='QuerySources-infoHeader'>{entry.info}</Box>}
       <Box padding="0.5rem" data-label="history-detail">
         <Grid container>
@@ -361,7 +360,7 @@ function QueryHistoryDetails({entry}) {
           <Box className='QuerySources-fontSourceCode' fontSize="13px" whiteSpace="pre-wrap">{_.isObject(entry.message) ? JSON.stringify(entry.message) : entry.message}</Box>
         </Box>
       </Box>
-    </Root>
+    </>
   );
 }
 
@@ -491,11 +490,11 @@ export function QueryHistory() {
     <Root>
       <Loader message={loaderText} />
       {React.useMemo(()=>(
-        <Box display="flex" height="100%">
+        <>
           {qhu.current.size() == 0 ?
             <EmptyPanelMessage text={gettext('No history found')} />:
             <>
-              <Box flexBasis="50%" maxWidth="50%" className='QuerySources-leftRoot'>
+              <Box className='QuerySources-leftRoot'>
                 <Box className='QuerySources-header'>
                   <Box marginRight="auto">
                     {gettext('Show queries generated internally by pgAdmin?')}
@@ -531,7 +530,7 @@ export function QueryHistory() {
                 <QueryHistoryDetails entry={selectedEntry}/>
               </Box>
             </>}
-        </Box>
+        </>
       ), [selectedItemKey, showInternal, qhu.current.size()])}
     </Root>
   );

web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx

@@ -7,6 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import SchemaView from '../../../../static/js/SchemaView';
 import BaseUISchema from '../../../../static/js/SchemaView/base_schema.ui';
@@ -22,10 +23,10 @@ import { showChangeOwnership } from '../../../../static/js/Dialogs/index';
 import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
 import _ from 'lodash';
 
-const StyledSchemaView = styled(SchemaView)(({theme}) => ({
+const StyledBox = styled(Box)(() => ({
+  height: '100%',
   '& .UserManagementDialog-root': {
-    ...theme.mixins.tabPanel,
-    padding: 0,
+    padding: 0 + ' !important',
   }
 }));
 
@@ -393,7 +394,7 @@ function UserManagementDialog({onClose}) {
     window.open(url_for('help.static', { 'filename': 'user_management.html' }), 'pgadmin_help');
   };
 
-  return <StyledSchemaView
+  return <StyledBox><SchemaView
     formType={'dialog'}
     getInitData={()=>{ return new Promise((resolve, reject)=>{
       api.get(url_for('user_management.users'))
@@ -415,7 +416,7 @@ function UserManagementDialog({onClose}) {
     disableSqlHelp={true}
     isTabView={false}
     formClassName='UserManagementDialog-root'
-  />;
+  /></StyledBox>;
 }
 
 UserManagementDialog.propTypes = {

web/regression/feature_tests/query_tool_journey_test.py

@@ -362,7 +362,7 @@ class QueryToolJourneyTest(BaseFeatureTest):
     def _check_history_queries_and_icons(self, history_queries, history_icons):
         # Select first query history entry
         self.page.find_by_css_selector(
-            QueryToolLocators.query_history_specific_entry.format(1)).click()
+            QueryToolLocators.query_history_specific_entry.format(2)).click()
         for icon, query in zip(history_icons, history_queries):
             # Check query
             query_history_selected_item = self.page.find_by_css_selector(