Fixes #39523 - Fix React tables toolbar alignment

Author: MariaAga

webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js

@@ -222,12 +222,19 @@ const TableIndexPage = ({
   ].filter(item => item);
 
   const customToolbar = (
-    <Toolbar ouiaId="page-toolbar" className="page-toolbar">
+    <Toolbar
+      ouiaId="page-toolbar"
+      className="page-toolbar"
+      id="page-layout-toolbar"
+    >
       <ToolbarContent>
         {searchable && (
-          <ToolbarGroup className="toolbar-group-search" variant="filter-group">
+          <ToolbarGroup
+            className="page-layout-toolbar-group-search"
+            variant="filter-group"
+          >
             {selectionToolbar}
-            <ToolbarItem className="toolbar-search">
+            <ToolbarItem id="page-layout-toolbar-search">
               <SearchBar
                 data={searchProps}
                 initialQuery=""
@@ -237,7 +244,7 @@ const TableIndexPage = ({
               />
             </ToolbarItem>
             {status === STATUS.PENDING && (
-              <ToolbarItem>
+              <ToolbarItem id="toolbar-spinner">
                 <Spinner size="sm" />
               </ToolbarItem>
             )}

webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js

@@ -81,7 +81,11 @@ const PageLayout = ({
           variant={PageSectionVariants.light}
         >
           {customToolbar || (
-            <Toolbar ouiaId="page-toolbar" id="page-layout-toolbar">
+            <Toolbar
+              ouiaId="page-toolbar"
+              className="page-toolbar"
+              id="page-layout-toolbar"
+            >
               <ToolbarContent>
                 <ToolbarGroup
                   className="page-layout-toolbar-group-search"