diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js
index 1a8517fbbf..9c32a91677 100644
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -25,6 +25,7 @@ const propTypes = {
   sortItems: PropTypes.func,
   viewId: PropTypes.string,
   onToggleDetail: PropTypes.func,
+  onCloseDetail: PropTypes.func,
 };
 
 class DirTool extends React.Component {
@@ -94,7 +95,7 @@ class DirTool extends React.Component {
   render() {
     const menuItems = this.getMenu();
     const { isDropdownMenuOpen } = this.state;
-    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission, onToggleDetail } = this.props;
+    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission, onToggleDetail, onCloseDetail } = this.props;
     const propertiesText = TextTranslation.PROPERTIES.value;
     const isFileExtended = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/');
     const isTagView = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.TAGS_PROPERTIES + '/');
@@ -106,6 +107,7 @@ class DirTool extends React.Component {
             viewId={viewId}
             isCustomPermission={isCustomPermission}
             onToggleDetail={onToggleDetail}
+            onCloseDetail={onCloseDetail}
           />
         </div>
       );
diff --git a/frontend/src/metadata/components/selector.js b/frontend/src/metadata/components/selector.js
index 4d81b5e631..066f6b2c74 100644
--- a/frontend/src/metadata/components/selector.js
+++ b/frontend/src/metadata/components/selector.js
@@ -21,7 +21,9 @@ const Selector = ({ options, settingKey, value, defaultValue, onChange }) => {
       value={selectedOption}
       options={options}
       onChange={handelOnChange}
-      menuPortalTarget="sf-metadata-view-setting-panel"
+      isSearchable={false}
+      isClearable={false}
+      menuPortalTarget=".sf-metadata-view-setting-panel"
     />
   );
 };
diff --git a/frontend/src/metadata/components/view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/index.js
index 7745e65bf9..7bfb186b5c 100644
--- a/frontend/src/metadata/components/view-toolbar/index.js
+++ b/frontend/src/metadata/components/view-toolbar/index.js
@@ -9,7 +9,7 @@ import MapViewToolBar from './map-view-toolbar';
 
 import './index.css';
 
-const ViewToolBar = ({ viewId, isCustomPermission, onToggleDetail }) => {
+const ViewToolBar = ({ viewId, isCustomPermission, onToggleDetail, onCloseDetail }) => {
   const [view, setView] = useState(null);
   const [collaborators, setCollaborators] = useState([]);
 
@@ -108,6 +108,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, onToggleDetail }) => {
           modifyFilters={modifyFilters}
           modifySorts={modifySorts}
           onToggleDetail={onToggleDetail}
+          onCloseDetail={onCloseDetail}
         />
       )}
       {viewType === VIEW_TYPE.MAP && (
@@ -126,6 +127,7 @@ ViewToolBar.propTypes = {
   viewId: PropTypes.string,
   isCustomPermission: PropTypes.bool,
   onToggleDetail: PropTypes.func,
+  onCloseDetail: PropTypes.func,
 };
 
 export default ViewToolBar;
diff --git a/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
index c917479070..2de9b4b36d 100644
--- a/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
+++ b/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
@@ -13,6 +13,7 @@ const KanbanViewToolBar = ({
   modifyFilters,
   modifySorts,
   onToggleDetail,
+  onCloseDetail,
 }) => {
   const viewType = useMemo(() => view.type, [view]);
   const viewColumns = useMemo(() => {
@@ -25,7 +26,7 @@ const KanbanViewToolBar = ({
   }, [viewColumns]);
 
   const onToggleKanbanSetting = () => {
-    onToggleDetail();
+    onCloseDetail();
     window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTINGS);
   };
 
@@ -89,6 +90,7 @@ KanbanViewToolBar.propTypes = {
   modifyFilters: PropTypes.func,
   modifySorts: PropTypes.func,
   onToggleDetail: PropTypes.func,
+  onCloseDetail: PropTypes.func,
 };
 
 export default KanbanViewToolBar;
diff --git a/frontend/src/metadata/views/kanban/index.css b/frontend/src/metadata/views/kanban/index.css
index 47f87f2511..100788056d 100644
--- a/frontend/src/metadata/views/kanban/index.css
+++ b/frontend/src/metadata/views/kanban/index.css
@@ -1,3 +1,7 @@
+.sf-metadata-wrapper .sf-metadata-main .sf-metadata-view-kanban-container {
+  transform: unset;
+}
+
 .sf-metadata-view-kanban {
   position: relative;
   width: 100%;
diff --git a/frontend/src/metadata/views/kanban/index.js b/frontend/src/metadata/views/kanban/index.js
index 042b5a3305..cdac8be821 100644
--- a/frontend/src/metadata/views/kanban/index.js
+++ b/frontend/src/metadata/views/kanban/index.js
@@ -42,7 +42,7 @@ const Kanban = () => {
   }, [isShowSettings]);
 
   return (
-    <div className="sf-metadata-container">
+    <div className="sf-metadata-container sf-metadata-view-kanban-container">
       <div className="sf-metadata-view-kanban">
         <Boards
           modifyRecord={modifyRecord}
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 0186953765..fb31806d54 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -2310,6 +2310,7 @@ class LibContentView extends React.Component {
                           viewId={this.state.viewId}
                           viewType={this.props.viewType}
                           onToggleDetail={this.toggleDirentDetail}
+                          onCloseDetail={this.closeDirentDetail}
                         />
                       </div>
                     }