Align config settings navbar layout

adityathebe · adityathebe · commit cbdd5b6a5acb · 2026-05-01T21:43:02.000+05:45
Place catalog add buttons beside breadcrumbs
diff --git a/src/pages/config/settings/ConfigPluginsPage.tsx b/src/pages/config/settings/ConfigPluginsPage.tsx
@@ -16,6 +16,7 @@ import { useUser } from "@flanksource-ui/context";
 import { tables } from "@flanksource-ui/context/UserAccessContext/permissions";
 import {
   BreadcrumbNav,
+  BreadcrumbChild,
   BreadcrumbRoot
 } from "@flanksource-ui/ui/BreadcrumbNav";
 import MRTAvatarCell from "@flanksource-ui/ui/MRTDataTable/Cells/MRTAvataCell";
@@ -231,29 +232,31 @@ export default function ConfigPluginsPage() {
       <Head prefix="Catalog Plugins" />
       <SearchLayout
         title={
-          <BreadcrumbNav
-            list={[
-              <BreadcrumbRoot key="/catalog" link="/catalog">
-                Catalog
-              </BreadcrumbRoot>,
-              <BreadcrumbRoot key="/catalog/plugins" link="/catalog/plugins">
-                Plugins
-              </BreadcrumbRoot>,
-              <AuthorizationAccessCheck
-                resource={tables.database}
-                action="write"
-                key="add-plugin"
+          <div className="flex items-center gap-2">
+            <BreadcrumbNav
+              list={[
+                <BreadcrumbRoot key="/catalog" link="/catalog">
+                  Catalog
+                </BreadcrumbRoot>,
+                <BreadcrumbChild key="/catalog/plugins" link="/catalog/plugins">
+                  Plugins
+                </BreadcrumbChild>
+              ]}
+            />
+            <AuthorizationAccessCheck
+              resource={tables.database}
+              action="write"
+              key="add-plugin"
+            >
+              <button
+                type="button"
+                className=""
+                onClick={() => setIsOpen(true)}
               >
-                <button
-                  type="button"
-                  className=""
-                  onClick={() => setIsOpen(true)}
-                >
-                  <AiFillPlusCircle size={32} className="text-blue-600" />
-                </button>
-              </AuthorizationAccessCheck>
-            ]}
-          />
+                <AiFillPlusCircle size={32} className="text-blue-600" />
+              </button>
+            </AuthorizationAccessCheck>
+          </div>
         }
         onRefresh={() => refetch()}
         loading={isLoading}
diff --git a/src/pages/config/settings/ConfigScrapersPage.tsx b/src/pages/config/settings/ConfigScrapersPage.tsx
@@ -19,6 +19,7 @@ import { ScrapeRunViewerDialog } from "./components/ScrapeRunViewerDialog";
 import { Avatar } from "@flanksource-ui/ui/Avatar";
 import {
   BreadcrumbNav,
+  BreadcrumbChild,
   BreadcrumbRoot
 } from "@flanksource-ui/ui/BreadcrumbNav";
 import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
@@ -244,30 +245,32 @@ export default function ConfigScrapersPage() {
       <Head prefix={`Catalog Settings`} />
       <SearchLayout
         title={
-          <BreadcrumbNav
-            list={[
-              <BreadcrumbRoot link="/catalog" key={"/catalog"}>
-                Catalog
-              </BreadcrumbRoot>,
-              <BreadcrumbRoot
-                link="/catalog/scrapers"
-                key={"/catalog/scrapers"}
-              >
-                Scrapers
-              </BreadcrumbRoot>,
-              <AuthorizationAccessCheck
-                resource={catalogScraperResourceInfo.table}
-                action="write"
-                key="add-button"
-              >
-                <AddSchemaResourceModal
-                  key={"add-resource"}
-                  onClose={() => refetch()}
-                  resourceInfo={catalogScraperResourceInfo!}
-                />
-              </AuthorizationAccessCheck>
-            ]}
-          />
+          <div className="flex items-center gap-2">
+            <BreadcrumbNav
+              list={[
+                <BreadcrumbRoot link="/catalog" key={"/catalog"}>
+                  Catalog
+                </BreadcrumbRoot>,
+                <BreadcrumbChild
+                  link="/catalog/scrapers"
+                  key={"/catalog/scrapers"}
+                >
+                  Scrapers
+                </BreadcrumbChild>
+              ]}
+            />
+            <AuthorizationAccessCheck
+              resource={catalogScraperResourceInfo.table}
+              action="write"
+              key="add-button"
+            >
+              <AddSchemaResourceModal
+                key={"add-resource"}
+                onClose={() => refetch()}
+                resourceInfo={catalogScraperResourceInfo!}
+              />
+            </AuthorizationAccessCheck>
+          </div>
         }
         onRefresh={() => refetch()}
         loading={isLoading || isRefetching}
