FIxed AsyncAPI styling issue

wso2 · Feb 19, 2024 · 0a4de1a · 0a4de1a
1 parent 441d457
commit 0a4de1a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/...bapp/source/src/app/components/Apis/Details/Definitions/AsyncApi/AsyncApiDefinitionUI.jsx b/...bapp/source/src/app/components/Apis/Details/Definitions/AsyncApi/AsyncApiDefinitionUI.jsx
@@ -25,6 +25,7 @@ import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import Grid from '@mui/material/Grid';
 import { ApiContext } from '../../ApiContext';
+import Box from '@mui/material/Box';
 
 const PREFIX = 'AsyncApiDefinitionUI';
 
@@ -81,7 +82,10 @@ class AsyncApiDefinitionUI extends Component {
                 </Typography>
                 <Grid container spacing={1} className={classes.editorRoot}>
                     <Grid item className={classes.editorPane}>
-                        <AsyncApiComponent schema={JSON.stringify(asyncApiDefinition)} />
+                        <Box maxWidth={1250}>
+                            <AsyncApiComponent schema={JSON.stringify(asyncApiDefinition)} />
+                        </Box>
+
                     </Grid>
                 </Grid>
             </Root>

diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/index.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/index.jsx
@@ -142,7 +142,6 @@ const Root = styled('div')((
         },
         [`& .${classes.leftMenuHorizontal}`]: {
             top: theme.custom.infoBar.height,
-            width: '100%',
             overflowX: 'auto',
             height: 60,
             display: 'flex',
@@ -195,7 +194,6 @@ const Root = styled('div')((
             flex: 1,
             flexGrow: 1,
             flexDirection: 'column',
-            width: '100%',
             marginLeft: shiftToLeft,
             marginRight: shiftToRight,
             [theme.breakpoints.down('md')]: {
@@ -209,7 +207,6 @@ const Root = styled('div')((
             display: 'flex',
             flex: 1,
             flexGrow: 1,
-            width: '100%',
             flexDirection: 'column',
             marginLeft: shiftToLeftMinView,
             marginRight: shiftToRightMinView,
@@ -460,11 +457,6 @@ class DetailsLegacy extends React.Component {
         const pageUrl = new URL(window.location);
         const isWidget = pageUrl.searchParams.get('widget');
         const isAsyncApi = this.isAsyncAPI(api);
-        const shiftToLeft = position === 'vertical-left' ? width : 0;
-        const shiftToRight = position === 'vertical-right' ? width : 0;
-        const shiftToLeftMinView = position === 'vertical-left' ? 45 : 0;
-        const shiftToRightMinView = position === 'vertical-right' ? 45 : 0;
-        const leftMenuPaddingLeft = position === 'horizontal' ? theme.spacing(3) : 0;
 
         return api ? (
             <Root>