From d25b55d1b7cd2e30cf4e296ccd7c7ef7bc7ff2c7 Mon Sep 17 00:00:00 2001
From: typescreep <typescreep@prorobotech.ru>
Date: Fri, 29 Aug 2025 18:12:52 +0300
Subject: [PATCH] new naviation

---
 .../ManageableSidebar/ManageableSidebar.tsx   |  6 ++--
 .../organisms/HeaderSecond/HeaderSecond.tsx   | 29 ++++++++++---------
 .../organisms/Selector/Selector.tsx           | 18 +++++++-----
 .../SelectorCluster/SelectorCluster.tsx}      | 22 ++++++++------
 .../organisms/SelectorCluster/index.ts        |  1 +
 .../SelectorClusterInside.tsx}                | 22 ++++++++------
 .../organisms/SelectorClusterInside/index.ts  |  1 +
 .../SelectorInside/SelectorInside.tsx         | 13 +++++----
 .../SelectorNamespace/SelectorNamespace.tsx   | 11 +++----
 .../organisms/HeaderSecond/organisms/index.ts |  2 ++
 src/components/organisms/Sidebar/Sidebar.tsx  |  9 +-----
 .../Sidebar/organisms/Selector/index.ts       |  1 -
 .../Sidebar/organisms/SelectorInside/index.ts |  1 -
 .../organisms/Sidebar/organisms/index.ts      |  2 --
 src/components/organisms/Sidebar/styled.ts    | 19 ++++++------
 src/constants/blocksSizes.ts                  |  2 +-
 src/templates/BaseTemplate/BaseTemplate.tsx   |  2 +-
 17 files changed, 86 insertions(+), 75 deletions(-)
 rename src/components/organisms/{Sidebar/organisms/Selector/Selector.tsx => HeaderSecond/organisms/SelectorCluster/SelectorCluster.tsx} (67%)
 create mode 100644 src/components/organisms/HeaderSecond/organisms/SelectorCluster/index.ts
 rename src/components/organisms/{Sidebar/organisms/SelectorInside/SelectorInside.tsx => HeaderSecond/organisms/SelectorClusterInside/SelectorClusterInside.tsx} (67%)
 create mode 100644 src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/index.ts
 delete mode 100644 src/components/organisms/Sidebar/organisms/Selector/index.ts
 delete mode 100644 src/components/organisms/Sidebar/organisms/SelectorInside/index.ts
 delete mode 100644 src/components/organisms/Sidebar/organisms/index.ts

diff --git a/src/components/molecules/ManageableSidebar/ManageableSidebar.tsx b/src/components/molecules/ManageableSidebar/ManageableSidebar.tsx
index a03f1b2..c883e28 100644
--- a/src/components/molecules/ManageableSidebar/ManageableSidebar.tsx
+++ b/src/components/molecules/ManageableSidebar/ManageableSidebar.tsx
@@ -4,7 +4,8 @@ import { useLocation, useParams } from 'react-router-dom'
 import { ManageableSidebarWithDataProvider } from '@prorobotech/openapi-k8s-toolkit'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
-import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes'
+// import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes'
+import { HEAD_FIRST_ROW } from 'constants/blocksSizes'
 import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion'
 import { Styled } from './styled'
 
@@ -33,7 +34,8 @@ export const ManageableSidebar: FC<TManageableSidebarProps> = ({
   const [height, setHeight] = useState(0)
 
   useEffect(() => {
-    const height = window.innerHeight - HEAD_FIRST_ROW - SIDEBAR_CLUSTER_HEIGHT - 2
+    // const height = window.innerHeight - HEAD_FIRST_ROW - SIDEBAR_CLUSTER_HEIGHT - 2
+    const height = window.innerHeight - HEAD_FIRST_ROW - 2
     setHeight(height)
 
     const handleResize = () => {
diff --git a/src/components/organisms/HeaderSecond/HeaderSecond.tsx b/src/components/organisms/HeaderSecond/HeaderSecond.tsx
index 7ea9728..1d0d561 100644
--- a/src/components/organisms/HeaderSecond/HeaderSecond.tsx
+++ b/src/components/organisms/HeaderSecond/HeaderSecond.tsx
@@ -1,9 +1,9 @@
 import React, { FC } from 'react'
-import { theme } from 'antd'
+import { Flex, theme } from 'antd'
 import { useParams } from 'react-router-dom'
 import { HEAD_SECOND_ROW } from 'constants/blocksSizes'
 import { BASE_USE_NAMESPACE_NAV } from 'constants/customizationApiGroupAndVersion'
-import { Selector, SelectorInside, SelectorNamespace } from './organisms'
+import { SelectorCluster, SelectorClusterInside, Selector, SelectorInside, SelectorNamespace } from './organisms'
 import { Styled } from './styled'
 
 type THeaderProps = {
@@ -21,17 +21,20 @@ export const HeaderSecond: FC<THeaderProps> = ({ inside }) => {
   return (
     <Styled.BackgroundContainer $bgColor={token.colorFillSecondary} $borderRadius={token.borderRadius}>
       <Styled.PaddingContainer $height={HEAD_SECOND_ROW}>
-        {inside && <SelectorInside clusterName={clusterName} namespace={namespace} />}
-        {!inside && BASE_USE_NAMESPACE_NAV !== 'true' && (
-          <Selector
-            clusterName={clusterName}
-            projectName={projectName || possibleProject}
-            instanceName={instanceName || possibleInstance}
-          />
-        )}
-        {!inside && BASE_USE_NAMESPACE_NAV === 'true' && (
-          <SelectorNamespace clusterName={clusterName} namespace={namespace} />
-        )}
+        <Flex gap={18}>
+          {inside ? <SelectorClusterInside clusterName={clusterName} /> : <SelectorCluster clusterName={clusterName} />}
+          {inside && <SelectorInside clusterName={clusterName} namespace={namespace} />}
+          {!inside && BASE_USE_NAMESPACE_NAV !== 'true' && (
+            <Selector
+              clusterName={clusterName}
+              projectName={projectName || possibleProject}
+              instanceName={instanceName || possibleInstance}
+            />
+          )}
+          {!inside && BASE_USE_NAMESPACE_NAV === 'true' && (
+            <SelectorNamespace clusterName={clusterName} namespace={namespace} />
+          )}
+        </Flex>
       </Styled.PaddingContainer>
     </Styled.BackgroundContainer>
   )
diff --git a/src/components/organisms/HeaderSecond/organisms/Selector/Selector.tsx b/src/components/organisms/HeaderSecond/organisms/Selector/Selector.tsx
index 36f1829..a7c0cdb 100644
--- a/src/components/organisms/HeaderSecond/organisms/Selector/Selector.tsx
+++ b/src/components/organisms/HeaderSecond/organisms/Selector/Selector.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react'
-import { Flex } from 'antd'
+import { Flex, Typography } from 'antd'
 import { useNavigate } from 'react-router-dom'
 import { useDirectUnknownResource } from '@prorobotech/openapi-k8s-toolkit'
 import { useNavSelector } from 'hooks/useNavSelector'
@@ -46,7 +46,7 @@ export const Selector: FC<TSelectorProps> = ({ clusterName, projectName, instanc
   // }
 
   const handleProjectChange = (value?: string) => {
-    if (value) {
+    if (value && value !== 'all') {
       setSelectedProjectName(value)
       const changeUrl =
         navigationData?.spec.projects.change
@@ -62,7 +62,7 @@ export const Selector: FC<TSelectorProps> = ({ clusterName, projectName, instanc
   }
 
   const handleInstanceChange = (value?: string) => {
-    if (value) {
+    if (value && value !== 'all') {
       setSelectedInstanceName(value)
       const changeUrl =
         navigationData?.spec.instances.change
@@ -86,24 +86,26 @@ export const Selector: FC<TSelectorProps> = ({ clusterName, projectName, instanc
   }, [projectName, instanceName, clusterName])
 
   return (
-    <Flex gap={18} justify="start">
+    <Flex gap={18} justify="start" align="center">
       {/* <EntrySelect
         placeholder="Cluster"
         options={clustersInSidebar}
         value={selectedClusterName}
         onChange={handleClusterChange}
       /> */}
+      <Typography.Text>Project: </Typography.Text>
       <EntrySelect
         placeholder="Project"
-        options={projectsInSidebar}
-        value={selectedProjectName}
+        options={[{ value: 'all', label: 'All Namespaces' }, ...projectsInSidebar]}
+        value={selectedProjectName || 'all'}
         onChange={handleProjectChange}
         disabled={selectedClusterName === undefined || projectsInSidebar.length === 0}
       />
+      <Typography.Text>Instance: </Typography.Text>
       <EntrySelect
         placeholder="Instance"
-        options={instancesInSidebar}
-        value={selectedInstanceName}
+        options={[{ value: 'all', label: 'All Namespaces' }, ...instancesInSidebar]}
+        value={selectedInstanceName || 'all'}
         onChange={handleInstanceChange}
         disabled={
           selectedClusterName === undefined ||
diff --git a/src/components/organisms/Sidebar/organisms/Selector/Selector.tsx b/src/components/organisms/HeaderSecond/organisms/SelectorCluster/SelectorCluster.tsx
similarity index 67%
rename from src/components/organisms/Sidebar/organisms/Selector/Selector.tsx
rename to src/components/organisms/HeaderSecond/organisms/SelectorCluster/SelectorCluster.tsx
index df32812..c48a769 100644
--- a/src/components/organisms/Sidebar/organisms/Selector/Selector.tsx
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorCluster/SelectorCluster.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useState } from 'react'
+import { Flex, Typography } from 'antd'
 import { useNavigate } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { RootState } from 'store/store'
@@ -6,11 +7,11 @@ import { useNavSelectorClusters } from 'hooks/useNavSelectorClusters'
 import { useMountEffect } from 'hooks/useMountEffect'
 import { EntrySelect } from 'components/atoms'
 
-type TSelectorProps = {
+type TSelectorClusterProps = {
   clusterName?: string
 }
 
-export const Selector: FC<TSelectorProps> = ({ clusterName }) => {
+export const SelectorCluster: FC<TSelectorClusterProps> = ({ clusterName }) => {
   const navigate = useNavigate()
   const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
 
@@ -32,12 +33,15 @@ export const Selector: FC<TSelectorProps> = ({ clusterName }) => {
   }, [clusterName])
 
   return (
-    <EntrySelect
-      placeholder="Cluster"
-      options={clustersInSidebar}
-      value={selectedClusterName}
-      onChange={handleClusterChange}
-      fullwidth
-    />
+    <Flex gap={18} justify="start" align="center">
+      <Typography.Text>Cluster: </Typography.Text>
+      <EntrySelect
+        placeholder="Cluster"
+        options={clustersInSidebar}
+        value={selectedClusterName}
+        onChange={handleClusterChange}
+        // fullwidth
+      />
+    </Flex>
   )
 }
diff --git a/src/components/organisms/HeaderSecond/organisms/SelectorCluster/index.ts b/src/components/organisms/HeaderSecond/organisms/SelectorCluster/index.ts
new file mode 100644
index 0000000..48eea29
--- /dev/null
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorCluster/index.ts
@@ -0,0 +1 @@
+export * from './SelectorCluster'
diff --git a/src/components/organisms/Sidebar/organisms/SelectorInside/SelectorInside.tsx b/src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/SelectorClusterInside.tsx
similarity index 67%
rename from src/components/organisms/Sidebar/organisms/SelectorInside/SelectorInside.tsx
rename to src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/SelectorClusterInside.tsx
index e77be9e..0805cac 100644
--- a/src/components/organisms/Sidebar/organisms/SelectorInside/SelectorInside.tsx
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/SelectorClusterInside.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useState } from 'react'
+import { Flex, Typography } from 'antd'
 import { useNavigate } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { RootState } from 'store/store'
@@ -6,11 +7,11 @@ import { useNavSelectorInside } from 'hooks/useNavSelectorInside'
 import { useMountEffect } from 'hooks/useMountEffect'
 import { EntrySelect } from 'components/atoms'
 
-type TSelectorInsideProps = {
+type TSelectorClusterInsideProps = {
   clusterName?: string
 }
 
-export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName }) => {
+export const SelectorClusterInside: FC<TSelectorClusterInsideProps> = ({ clusterName }) => {
   const navigate = useNavigate()
   const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
 
@@ -32,12 +33,15 @@ export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName }) => {
   }, [clusterName])
 
   return (
-    <EntrySelect
-      placeholder="Cluster"
-      options={clustersInSidebar}
-      value={selectedClusterName}
-      onChange={handleClusterChange}
-      fullwidth
-    />
+    <Flex gap={18} justify="start" align="center">
+      <Typography.Text>Cluster: </Typography.Text>
+      <EntrySelect
+        placeholder="Cluster"
+        options={clustersInSidebar}
+        value={selectedClusterName}
+        onChange={handleClusterChange}
+        // fullwidth
+      />
+    </Flex>
   )
 }
diff --git a/src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/index.ts b/src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/index.ts
new file mode 100644
index 0000000..019259c
--- /dev/null
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/index.ts
@@ -0,0 +1 @@
+export * from './SelectorClusterInside'
diff --git a/src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx b/src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx
index 9376c73..78b641f 100644
--- a/src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react'
-import { Flex } from 'antd'
+import { Flex, Typography } from 'antd'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useNavSelectorInside } from 'hooks/useNavSelectorInside'
 import { useMountEffect } from 'hooks/useMountEffect'
@@ -26,12 +26,12 @@ export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName, namespac
   // }
 
   const handleNamepsaceChange = (value?: string) => {
-    if (value && params.namespace) {
+    if (value && value !== 'all' && params.namespace) {
       setSelectedNamespace(value)
       const pathnames = window.location.pathname.split('/')
       const newPathNames = [...pathnames.slice(0, 4), value, ...pathnames.slice(5)]
       navigate(newPathNames.join('/'))
-    } else if (value && !params.namespace) {
+    } else if (value && value !== 'all' && !params.namespace) {
       setSelectedNamespace(value)
       const pathnames = window.location.pathname.split('/')
       const newPathNames = [...pathnames.slice(0, 4), value, ...pathnames.slice(4)]
@@ -49,17 +49,18 @@ export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName, namespac
   }, [namespace, clusterName])
 
   return (
-    <Flex gap={18} justify="start">
+    <Flex gap={18} justify="start" align="center">
       {/* <EntrySelect
         placeholder="Cluster"
         options={clustersInSidebar}
         value={selectedClusterName}
         onChange={handleClusterChange}
       /> */}
+      <Typography.Text>Namespace: </Typography.Text>
       <EntrySelect
         placeholder="Namespace"
-        options={namespacesInSidebar}
-        value={selectedNamespace}
+        options={[{ value: 'all', label: 'All Namespaces' }, ...namespacesInSidebar]}
+        value={selectedNamespace || 'all'}
         onChange={handleNamepsaceChange}
         disabled={selectedClusterName === undefined || namespacesInSidebar.length === 0}
       />
diff --git a/src/components/organisms/HeaderSecond/organisms/SelectorNamespace/SelectorNamespace.tsx b/src/components/organisms/HeaderSecond/organisms/SelectorNamespace/SelectorNamespace.tsx
index 6f7bdf9..41e2a40 100644
--- a/src/components/organisms/HeaderSecond/organisms/SelectorNamespace/SelectorNamespace.tsx
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorNamespace/SelectorNamespace.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react'
-import { Flex } from 'antd'
+import { Flex, Typography } from 'antd'
 import { useNavigate } from 'react-router-dom'
 import { useDirectUnknownResource } from '@prorobotech/openapi-k8s-toolkit'
 import { useNavSelectorInside } from 'hooks/useNavSelectorInside'
@@ -35,7 +35,7 @@ export const SelectorNamespace: FC<TSelectorNamespaceProps> = ({ clusterName, na
   })
 
   const handleNamepsaceChange = (value?: string) => {
-    if (value) {
+    if (value && value !== 'all') {
       setSelectedNamespace(value)
       const changeUrl =
         navigationData?.spec.namespaces.change
@@ -56,11 +56,12 @@ export const SelectorNamespace: FC<TSelectorNamespaceProps> = ({ clusterName, na
   }, [namespace, clusterName])
 
   return (
-    <Flex gap={18} justify="start">
+    <Flex gap={18} justify="start" align="center">
+      <Typography.Text>Namespace: </Typography.Text>
       <EntrySelect
         placeholder="Namespace"
-        options={namespacesInSidebar}
-        value={selectedNamespace}
+        options={[{ value: 'all', label: 'All Namespaces' }, ...namespacesInSidebar]}
+        value={selectedNamespace || 'all'}
         onChange={handleNamepsaceChange}
         disabled={selectedClusterName === undefined || namespacesInSidebar.length === 0}
       />
diff --git a/src/components/organisms/HeaderSecond/organisms/index.ts b/src/components/organisms/HeaderSecond/organisms/index.ts
index f6bfb75..f39b8ae 100644
--- a/src/components/organisms/HeaderSecond/organisms/index.ts
+++ b/src/components/organisms/HeaderSecond/organisms/index.ts
@@ -1,3 +1,5 @@
 export * from './Selector'
 export * from './SelectorInside'
 export * from './SelectorNamespace'
+export * from './SelectorCluster'
+export * from './SelectorClusterInside'
diff --git a/src/components/organisms/Sidebar/Sidebar.tsx b/src/components/organisms/Sidebar/Sidebar.tsx
index 2289d4a..54a82a6 100644
--- a/src/components/organisms/Sidebar/Sidebar.tsx
+++ b/src/components/organisms/Sidebar/Sidebar.tsx
@@ -1,23 +1,16 @@
 import React, { FC, ReactNode } from 'react'
 import { theme } from 'antd'
-import { useParams } from 'react-router-dom'
-import { Selector, SelectorInside } from './organisms'
 import { Styled } from './styled'
 
 type TSidebarProps = {
-  inside?: boolean
   sidebar?: ReactNode
 }
 
-export const Sidebar: FC<TSidebarProps> = ({ inside, sidebar }) => {
-  const { clusterName } = useParams()
+export const Sidebar: FC<TSidebarProps> = ({ sidebar }) => {
   const { token } = theme.useToken()
 
   return (
     <Styled.BackgroundContainer $borderRadius={token.borderRadius} $borderColor={token.colorBorder}>
-      <Styled.ClusterSelectorContainer>
-        {inside ? <SelectorInside clusterName={clusterName} /> : <Selector clusterName={clusterName} />}
-      </Styled.ClusterSelectorContainer>
       {sidebar}
     </Styled.BackgroundContainer>
   )
diff --git a/src/components/organisms/Sidebar/organisms/Selector/index.ts b/src/components/organisms/Sidebar/organisms/Selector/index.ts
deleted file mode 100644
index 8ea8ac3..0000000
--- a/src/components/organisms/Sidebar/organisms/Selector/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Selector'
diff --git a/src/components/organisms/Sidebar/organisms/SelectorInside/index.ts b/src/components/organisms/Sidebar/organisms/SelectorInside/index.ts
deleted file mode 100644
index 88397f6..0000000
--- a/src/components/organisms/Sidebar/organisms/SelectorInside/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SelectorInside'
diff --git a/src/components/organisms/Sidebar/organisms/index.ts b/src/components/organisms/Sidebar/organisms/index.ts
deleted file mode 100644
index cdc6d40..0000000
--- a/src/components/organisms/Sidebar/organisms/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Selector'
-export * from './SelectorInside'
diff --git a/src/components/organisms/Sidebar/styled.ts b/src/components/organisms/Sidebar/styled.ts
index 06c74dc..4d977e4 100644
--- a/src/components/organisms/Sidebar/styled.ts
+++ b/src/components/organisms/Sidebar/styled.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components'
-import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes'
+// import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes'
+import { HEAD_FIRST_ROW } from 'constants/blocksSizes'
 
 type TBackgroundContainerProps = {
   $borderRadius: number
@@ -14,15 +15,15 @@ const BackgroundContainer = styled.div<TBackgroundContainerProps>`
   height: calc(100vh - ${HEAD_FIRST_ROW}px);
 `
 
-const ClusterSelectorContainer = styled.div`
-  height: ${SIDEBAR_CLUSTER_HEIGHT}px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 12px;
-`
+// const ClusterSelectorContainer = styled.div`
+//   height: ${SIDEBAR_CLUSTER_HEIGHT}px;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   padding: 12px;
+// `
 
 export const Styled = {
   BackgroundContainer,
-  ClusterSelectorContainer,
+  // ClusterSelectorContainer,
 }
diff --git a/src/constants/blocksSizes.ts b/src/constants/blocksSizes.ts
index 8be2d5b..545c3d3 100644
--- a/src/constants/blocksSizes.ts
+++ b/src/constants/blocksSizes.ts
@@ -5,7 +5,7 @@ export const FOOTER_HEIGHT = 38
 export const MAIN_CONTENT_HORIZONTAL_PADDING = 24
 export const BACKLINK_HEIGHT = 26
 /* sidebar */
-export const SIDEBAR_CLUSTER_HEIGHT = 56
+// export const SIDEBAR_CLUSTER_HEIGHT = 56
 /* computed only */
 export const BREADCRUMBS_HEIGHT = 26
 export const CONTENT_CARD_PADDING = 25
diff --git a/src/templates/BaseTemplate/BaseTemplate.tsx b/src/templates/BaseTemplate/BaseTemplate.tsx
index fe89a26..b79fe7e 100644
--- a/src/templates/BaseTemplate/BaseTemplate.tsx
+++ b/src/templates/BaseTemplate/BaseTemplate.tsx
@@ -98,7 +98,7 @@ export const BaseTemplate: FC<TBaseTemplateProps> = ({ children, withNoCluster,
               <Header />
               <RowFlexGrow wrap={false}>
                 <Col span="250px">
-                  <Sidebar inside={inside} sidebar={sidebar} />
+                  <Sidebar sidebar={sidebar} />
                 </Col>
                 <FlexCol flex="auto">
                   <DefaultLayout.ContentPadding $isFederation={isFederation}>