Fixed an issue with the error message being displayed at the right place for Azure deployments. Fixes #7497

docs/en_US/release_notes_6_13.rst

@@ -21,5 +21,6 @@ Housekeeping
 Bug fixes
 *********
 
+  | `Issue #7497 <https://redmine.postgresql.org/issues/7497>`_ -  Fixed an issue with the error message being displayed at the right place for Azure deployments.
   | `Issue #7563 <https://redmine.postgresql.org/issues/7563>`_ -  Fixed an issue where autocomplete is not working after clearing the query editor.
   | `Issue #7573 <https://redmine.postgresql.org/issues/7573>`_ -  Ensure that autocomplete does not appear when navigating code using arrow keys.

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

@@ -16,6 +16,15 @@ import url_for from 'sources/url_for';
 import getApiInstance from '../../../../static/js/api_instance';
 import { isEmptyString } from 'sources/validators';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(() =>
+  ({
+    formClass: {
+      overflow: 'auto',
+    }
+  }),
+);
 
 // AWS credentials
 export function AwsCredentials(props) {
@@ -56,6 +65,7 @@ AwsCredentials.propTypes = {
 // AWS Instance Details
 export function AwsInstanceDetails(props) {
   const [cloudInstanceDetailsInstance, setCloudInstanceDetailsInstance] = React.useState();
+  const classes = useStyles();
 
   React.useMemo(() => {
     const cloudDBInstanceSchema = new CloudInstanceDetailsSchema({
@@ -113,6 +123,7 @@ export function AwsInstanceDetails(props) {
     onDataChange={(isChanged, changedData) => {
       props.setCloudInstanceDetails(changedData);
     }}
+    formClassName={classes.formClass}
   />;
 }
 AwsInstanceDetails.propTypes = {

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

@@ -18,6 +18,16 @@ import getApiInstance from '../../../../static/js/api_instance';
 import { CloudWizardEventsContext } from './CloudWizard';
 import {MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
 import gettext from 'sources/gettext';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(() =>
+  ({
+    formClass: {
+      overflow: 'auto',
+    }
+  }),
+);
+const classes = useStyles();
 
 // Azure credentials
 export function AzureCredentials(props) {
@@ -186,6 +196,7 @@ export function AzureInstanceDetails(props) {
     onDataChange={(isChanged, changedData) => {
       props.setAzureInstanceData(changedData);
     }}
+    formClassName={classes.formClass}
   />;
 }
 AzureInstanceDetails.propTypes = {
@@ -225,6 +236,7 @@ export function AzureDatabaseDetails(props) {
     onDataChange={(isChanged, changedData) => {
       props.setAzureDatabaseData(changedData);
     }}
+    formClassName={classes.formClass}
   />;
 }
 AzureDatabaseDetails.propTypes = {