From f6b82b75e4bd2244ff37a89be67f971d1d9de7ba Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Tue, 14 Jul 2026 16:33:01 +0100
Subject: [PATCH] Fixes #39523 - Fix React tables toolbar alignment

---
 .../PF4/TableIndexPage/TableIndexPage.js          | 15 +++++++++++----
 .../routes/common/PageLayout/PageLayout.js        |  6 +++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js
index fb1aa9eea6..3b6ca292d2 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js
+++ b/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>
             )}
diff --git a/webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js b/webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js
index e57838b2d1..b99624734a 100644
--- a/webpack/assets/javascripts/react_app/routes/common/PageLayout/PageLayout.js
+++ b/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"