From ce085278159d56f909741128e87f872f9e668a33 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Wed, 18 Dec 2024 14:31:36 +0530
Subject: [PATCH 1/3] HDDS-11957. Add scrollbar for long DU path names

---
 .../duBreadcrumbNav/duBreadcrumbNav.tsx       | 12 ++++----
 .../src/v2/pages/diskUsage/diskUsage.less     | 29 ++++++++++++-------
 2 files changed, 26 insertions(+), 15 deletions(-)

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..f19437bb34fb 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
@@ -106,15 +106,15 @@ const DUBreadcrumbNav: React.FC<File> = ({
     //Push a new input to allow passing a path
     menuItems.push(
       <Menu.Item
-        key={`${lastPath}-search`}>
+        key={`${lastPath}-search`}
+        style={{ width: '100%'}}>
         <Input.Search
           placeholder='Enter Path'
           onSearch={handleSearch}
           onClick={(e) => {
             //Prevent menu close on click
             e.stopPropagation();
-          }}
-          style={{ width: 160}}/>
+          }} />
       </Menu.Item>
     )
     return (
@@ -162,11 +162,13 @@ const DUBreadcrumbNav: React.FC<File> = ({
   }
 
   return (
-    <Breadcrumb
-      separator={<CaretRightOutlined style={{ fontSize: '12px'}}/>}
+    <div id='breadcrumb-container'>
+      <Breadcrumb
+      separator={'/'}
       className='breadcrumb-nav'>
       {generateBreadCrumbs()}
     </Breadcrumb>
+    </div>
   )
 }
 
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..94a8387cc672 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: scroll;
+    padding: 0px 8px 16px 8px;
+    margin-bottom: 10px;
+    width: 100%;
+    height: 20%;
+
+    .breadcrumb-nav {
+      font-size: 0.9vw;
+      width: 85vw;
+      .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

From b4e9e30a28c69b2a4d2886aab2bead60cf8162fb Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Wed, 18 Dec 2024 14:41:00 +0530
Subject: [PATCH 2/3] Fix width according to max-content size

---
 .../ozone-recon-web/src/v2/pages/diskUsage/diskUsage.less   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 94a8387cc672..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
@@ -30,15 +30,15 @@
 
   #breadcrumb-container {
     overflow-y: hidden;
-    overflow-x: scroll;
+    overflow-x: auto;
     padding: 0px 8px 16px 8px;
     margin-bottom: 10px;
-    width: 100%;
+    width: 83vw;
     height: 20%;
 
     .breadcrumb-nav {
       font-size: 0.9vw;
-      width: 85vw;
+      width: max-content;
       .breadcrumb-nav-item {
         background: transparent;
         border: none !important;

From 46b5ff7a83311d63daf23679f35501e660f05b4c Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Wed, 18 Dec 2024 14:49:50 +0530
Subject: [PATCH 3/3] Remove unused imports

---
 .../src/v2/components/duBreadcrumbNav/duBreadcrumbNav.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 f19437bb34fb..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 = {