improve layout rendering
-import { Alert, Button, Form, Grid, GridItem } from '@patternfly/react-core';
+import { Alert, Button, Form, Stack, StackItem } from '@patternfly/react-core';
import * as React from 'react';
export interface IOAuthAppExpanderBodyProps {
@@ -30,24 +30,19 @@ export const OAuthAppExpanderBody: React.FC<
showSuccess
}) => {
return (
- <>
+ <Stack gutter={'md'}>
{showSuccess && (
- <Grid sm={11}>
- <GridItem>
+ <StackItem>
<Alert variant={'success'}
title={i18nAlertTitle}>
{i18nAlertDetail}
</Alert>
- </GridItem>
- </Grid>
+ </StackItem>
)}
- <Grid sm={12} md={8}>
- <GridItem>
+ <StackItem>
<Form isHorizontal={true}>{children}</Form>
- </GridItem>
- </Grid>
- <Grid sm={12} md={8}>
- <GridItem>
+ </StackItem>
+ <StackItem>
<div>
<Button
data-testid={'o-auth-app-expander-body-save-button'}
@@ -65,8 +60,7 @@ export const OAuthAppExpanderBody: React.FC<
{i18nRemoveButtonText}
</Button>
</div>
- </GridItem>
- </Grid>
- </>
+ </StackItem>
+ </Stack>
);
};
