From 1a391e6dc1703fa57d3b3b764c92823abfeae54b Mon Sep 17 00:00:00 2001
From: "dawid.wolosz" <dawid.wolosz@softwareone.com>
Date: Fri, 29 Nov 2024 14:08:34 +0100
Subject: [PATCH] Updated resource page and subpages

---
 ngui/ui/src/components/ActionBar/ActionBar.tsx  | 12 ++++++++----
 .../src/components/Breadcrumbs/Breadcrumbs.tsx  |  1 +
 .../components/ClusterTypes/ClusterTypes.tsx    | 17 ++++++++++-------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/ngui/ui/src/components/ActionBar/ActionBar.tsx b/ngui/ui/src/components/ActionBar/ActionBar.tsx
index b9eeea4ff..37a01de48 100644
--- a/ngui/ui/src/components/ActionBar/ActionBar.tsx
+++ b/ngui/ui/src/components/ActionBar/ActionBar.tsx
@@ -241,9 +241,13 @@ const ActionBar = ({ data, isPage = true }) => {
   return title || !isEmptyActions ? (
     <AppBar position="static" className={mapBarClass}>
       <Toolbar disableGutters ref={wrapperRef}>
-        <Box pt={2} pb={2} display={"flex"} sx={{ alignItems: "center" }}>
-          {showBreadcrumbs ? <Breadcrumbs withSlashAtTheEnd>{breadcrumbs}</Breadcrumbs> : null}
-          <Box display="flex">
+        <Box pt={2} pb={2} width={"100%"} display={"flex"} alignItems={"center"}>
+          {showBreadcrumbs ? (
+            <Box>
+              <Breadcrumbs withSlashAtTheEnd>{breadcrumbs}</Breadcrumbs>
+            </Box>
+          ) : null}
+          <Box display="flex" width="100%">
             {title ? (
               <Box display="flex" flexGrow="1" alignItems="center">
                 {renderTitle(title, titleRef)}
@@ -252,7 +256,7 @@ const ActionBar = ({ data, isPage = true }) => {
             {!isEmptyActions ? (
               <Box className={classes.itemsWrapper} ref={buttonsRef}>
                 {!isEmpty(hidden) && (
-                  <Box component="div" className={actionsClasses}>
+                  <Box component="div" width={"100%"} sx={{ display: "flex" }} className={actionsClasses}>
                     <Popover
                       renderMenu={({ closeHandler }) => <DropDownMenu items={hidden} onClose={closeHandler} />}
                       label={<IconButton isLoading={hidden.some((item) => item.isLoading)} icon={<MoreVertOutlinedIcon />} />}
diff --git a/ngui/ui/src/components/Breadcrumbs/Breadcrumbs.tsx b/ngui/ui/src/components/Breadcrumbs/Breadcrumbs.tsx
index a10887515..4419c1e28 100644
--- a/ngui/ui/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/ngui/ui/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -10,6 +10,7 @@ const Breadcrumbs = ({ children, withSlashAtTheEnd = false }) => {
       classes={{
         separator: classes.separator
       }}
+      sx={{ "& ol": { flexWrap: "nowrap" } }}
       separator={
         <HorizontalRuleIcon
           sx={{
diff --git a/ngui/ui/src/components/ClusterTypes/ClusterTypes.tsx b/ngui/ui/src/components/ClusterTypes/ClusterTypes.tsx
index 2fece9056..dd9c3a005 100644
--- a/ngui/ui/src/components/ClusterTypes/ClusterTypes.tsx
+++ b/ngui/ui/src/components/ClusterTypes/ClusterTypes.tsx
@@ -1,5 +1,6 @@
 import Grid from "@mui/material/Grid";
 import Link from "@mui/material/Link";
+import { Box } from "@mui/system";
 import { FormattedMessage } from "react-intl";
 import { Link as RouterLink } from "react-router-dom";
 import ActionBar from "components/ActionBar";
@@ -7,7 +8,7 @@ import ClusterTypesTable from "components/ClusterTypesTable";
 import InlineSeverityAlert from "components/InlineSeverityAlert";
 import PageContentWrapper from "components/PageContentWrapper";
 import { DOCS_HYSTAX_CLUSTERS, RESOURCES } from "urls";
-import { SPACING_2 } from "utils/layouts";
+import { KU_SPACING_2 } from "../../utils/layouts";
 
 const actionBarDefinition = {
   breadcrumbs: [
@@ -39,12 +40,14 @@ const ClusterTypes = ({ clusterTypes, onUpdatePriority, isLoading = false }) =>
   <>
     <ActionBar data={actionBarDefinition} />
     <PageContentWrapper>
-      <Grid container spacing={SPACING_2}>
-        <Grid item xs={12}>
-          <ClusterTypesTable clusterTypes={clusterTypes} onUpdatePriority={onUpdatePriority} isLoading={isLoading} />
-        </Grid>
-        <Grid item xs={12}>
-          <ExplanationMessage />
+      <Grid direction="row" container spacing={3}>
+        <Grid item xs={12} className={"KuBoxShadowRoot"}>
+          <Box>
+            <Box marginBottom={KU_SPACING_2}>
+              <ExplanationMessage />
+            </Box>
+            <ClusterTypesTable clusterTypes={clusterTypes} onUpdatePriority={onUpdatePriority} isLoading={isLoading} />
+          </Box>
         </Grid>
       </Grid>
     </PageContentWrapper>