diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx index d28212cca25f..ac09b6bb1614 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx @@ -21,7 +21,7 @@ import React, { useState } from 'react'; import { DUSubpath } from '@/v2/types/diskUsage.types'; import { Breadcrumb, Menu, Input } from 'antd'; import { MenuProps } from 'antd/es/menu'; -import { CaretDownOutlined, CaretRightOutlined, HomeFilled } from '@ant-design/icons'; +import { CaretDownOutlined, HomeFilled } from '@ant-design/icons'; type File = { @@ -106,15 +106,15 @@ const DUBreadcrumbNav: React.FC = ({ //Push a new input to allow passing a path menuItems.push( + key={`${lastPath}-search`} + style={{ width: '100%'}}> { //Prevent menu close on click e.stopPropagation(); - }} - style={{ width: 160}}/> + }} /> ) return ( @@ -162,11 +162,13 @@ const DUBreadcrumbNav: React.FC = ({ } return ( - } + ) } diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less index dca3861df138..ebeff236a1f2 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less @@ -28,15 +28,24 @@ .content-div { min-height: unset; - .breadcrumb-nav { - font-size: 0.9vw; - margin: 0px 0px 8px 8px; - .breadcrumb-nav-item { - background: transparent; - border: none !important; - cursor: pointer; - color: @primary-color; - + #breadcrumb-container { + overflow-y: hidden; + overflow-x: auto; + padding: 0px 8px 16px 8px; + margin-bottom: 10px; + width: 83vw; + height: 20%; + + .breadcrumb-nav { + font-size: 0.9vw; + width: max-content; + .breadcrumb-nav-item { + background: transparent; + border: none !important; + cursor: pointer; + color: @primary-color; + + } } } @@ -56,4 +65,4 @@ column-gap: 8px; padding: 0px 8px 16px 8px; } -} +} \ No newline at end of file