diff --git a/frontend/src/components/common/Resource/Resource.tsx b/frontend/src/components/common/Resource/Resource.tsx index 023724be3c..6446a00e54 100644 --- a/frontend/src/components/common/Resource/Resource.tsx +++ b/frontend/src/components/common/Resource/Resource.tsx @@ -73,6 +73,12 @@ export function ResourceLink(props: ResourceLinkProps) { ); } +const useDetailsGridStyles = makeStyles((theme: Theme) => ({ + section: { + marginBottom: theme.spacing(2), + }, +})); + export interface DetailsGridProps extends PropsWithChildren> { /** Resource type to fetch (from the ResourceClasses). */ @@ -108,6 +114,7 @@ export function DetailsGrid(props: DetailsGridProps) { } = props; const { t } = useTranslation('frequent'); const location = useLocation<{ backLink: NavLinkProps['location'] }>(); + const classes = useDetailsGridStyles(); const hasPreviousRoute = useHasPreviousRoute(); const detailViews = useTypedSelector(state => state.detailsViewSections.detailsViewSections); const detailViewsProcessors = useTypedSelector( @@ -278,7 +285,7 @@ export function DetailsGrid(props: DetailsGridProps) { } return ( - + {React.Children.toArray( sectionsProcessed.map(section => { const Section = has(section, 'section') diff --git a/frontend/src/components/endpoints/__snapshots__/EndpointDetails.stories.storyshot b/frontend/src/components/endpoints/__snapshots__/EndpointDetails.stories.storyshot index c4e2748ce4..1b97cfbfe7 100644 --- a/frontend/src/components/endpoints/__snapshots__/EndpointDetails.stories.storyshot +++ b/frontend/src/components/endpoints/__snapshots__/EndpointDetails.stories.storyshot @@ -3,7 +3,7 @@ exports[`Storyshots endpoints/EndpointsDetailsView Default 1`] = `