diff --git a/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx b/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx index 6d63543e3ce..9399bdac717 100644 --- a/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx +++ b/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx @@ -37,6 +37,11 @@ const toolbarButtonsContainer = css({ alignItems: 'center', }); +const indexesToolbarContainerStyles = css({ + padding: spacing[400], + paddingBottom: 0, +}); + const alignSelfEndStyles = css({ marginLeft: 'auto', }); @@ -98,7 +103,10 @@ export const IndexesToolbar: React.FunctionComponent = ({ ); return ( -
+
{!isReadonlyView && (
diff --git a/packages/compass-indexes/src/components/indexes/indexes.tsx b/packages/compass-indexes/src/components/indexes/indexes.tsx index 87d66ee0854..285f90aa86d 100644 --- a/packages/compass-indexes/src/components/indexes/indexes.tsx +++ b/packages/compass-indexes/src/components/indexes/indexes.tsx @@ -35,11 +35,6 @@ import CreateIndexModal from '../create-index-modal/create-index-modal'; const IDEAL_NUMBER_OF_MAX_INDEXES = 10; const containerStyles = css({ - paddingTop: spacing[400], - paddingLeft: spacing[400], - paddingRight: spacing[400], - // No padding bottom so that the table can scroll visibly to the bottom - paddingBottom: 0, gap: spacing[400], display: 'flex', flexDirection: 'column', @@ -106,7 +101,9 @@ function isRefreshingStatus(status: FetchStatus) { } const indexesContainersStyles = css({ - paddingTop: spacing[400], + padding: spacing[400], + // No padding bottom so that the table can scroll visibly to the bottom. + paddingBottom: 0, display: 'grid', gridTemplateColumns: '100%', gap: spacing[200],