chore(indexes): update padding to allow for focus ring to show on toolbar buttons (#6920)

Author: Anemy

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<IndexesToolbarProps> = ({
   );
 
   return (
-    <div data-testid="indexes-toolbar-container">
+    <div
+      className={indexesToolbarContainerStyles}
+      data-testid="indexes-toolbar-container"
+    >
       {!isReadonlyView && (
         <div data-testid="indexes-toolbar">
           <div className={toolbarButtonsContainer}>

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],