From dfa690a2064fd851975406b520a1eba9ea8f5375 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Thu, 7 Mar 2024 15:11:33 +0100
Subject: [PATCH 1/7] fix: overflow issue fix

---
 apps/sensenet/src/components/tree/tree.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
index f6c6cf084..906b00be7 100644
--- a/apps/sensenet/src/components/tree/tree.tsx
+++ b/apps/sensenet/src/components/tree/tree.tsx
@@ -173,6 +173,8 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
         flexGrow: 2,
         flexShrink: 0,
         borderRight: '1px solid rgba(128,128,128,.2)',
+        overflowY: 'scroll',
+        overflowX: 'hidden',
       }}>
       <AutoSizer>
         {({ height, width }) => (
@@ -192,7 +194,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
             containerStyle={{ overflow: 'initial' }}
             rowRenderer={rowRenderer}
             rowCount={itemCount}
-            style={{ outline: 'none' }}
+            style={{ outline: 'none', overflow: 'unset' }}
           />
         )}
       </AutoSizer>

From a7a563df44176db11698e220047c52c7ada62b88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Mon, 11 Mar 2024 11:35:48 +0100
Subject: [PATCH 2/7] fix: grid fix

---
 .../src/components/content-list/content-list.tsx   | 14 +++++++-------
 apps/sensenet/src/components/tree/tree.tsx         |  5 ++---
 .../src/ContentList/virtualized-table.tsx          | 11 +++++++++--
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/sensenet/src/components/content-list/content-list.tsx b/apps/sensenet/src/components/content-list/content-list.tsx
index b444b473e..4f2b08631 100644
--- a/apps/sensenet/src/components/content-list/content-list.tsx
+++ b/apps/sensenet/src/components/content-list/content-list.tsx
@@ -91,8 +91,8 @@ export const isReferenceField = (fieldName: string, repo: Repository, schema = '
   return refWhiteList.some((field) => field === fieldName) || setting?.Type === 'ReferenceFieldSetting'
 }
 
-const rowHeightConst = 57
-const headerHeightConst = 48
+const rowHeightConst = 67
+const headerHeightConst = 58
 
 /**
  * Compare passed minutes with
@@ -734,21 +734,21 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
                 handleItemClick(rowMouseEventHandlerParams)
               },
               rowStyle: {
-                position: 'static',
-                top: 'auto',
+                position: 'relative',
+                top: 'unset',
                 height: 'auto',
                 overflow: 'initial',
-                padding: '5px 0px',
               },
               onRowDoubleClick: onItemDoubleClickFunc,
               disableHeader: props.hideHeader,
               containerStyle: {
-                height: '100%',
                 display: 'flex',
                 flexDirection: 'column',
                 overflowY: 'auto',
-                maxHeight: '100%',
                 paddingBottom: '15px',
+                minHeight: '100%',
+                height: 'inherit',
+                maxHeight: 'inherit',
               },
             }}
           />
diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
index 906b00be7..0c9dbae38 100644
--- a/apps/sensenet/src/components/tree/tree.tsx
+++ b/apps/sensenet/src/components/tree/tree.tsx
@@ -173,8 +173,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
         flexGrow: 2,
         flexShrink: 0,
         borderRight: '1px solid rgba(128,128,128,.2)',
-        overflowY: 'scroll',
-        overflowX: 'hidden',
+        overflow: 'unset',
       }}>
       <AutoSizer>
         {({ height, width }) => (
@@ -191,7 +190,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
               }
               setElements([...loadMoreElements])
             }}
-            containerStyle={{ overflow: 'initial' }}
+            containerStyle={{ overflow: 'unset' }}
             rowRenderer={rowRenderer}
             rowCount={itemCount}
             style={{ outline: 'none', overflow: 'unset' }}
diff --git a/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx b/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx
index ee153d5dd..248b447c1 100644
--- a/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx
+++ b/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx
@@ -14,6 +14,7 @@ import clsx from 'clsx'
 import React, { useCallback, useMemo } from 'react'
 import {
   AutoSizer,
+  CellMeasurerCache,
   Column,
   Index,
   RowMouseEventHandlerParams,
@@ -25,6 +26,11 @@ import {
 import { ColumnSetting, ContentListBaseProps } from './content-list-base-props'
 import { ActionsCell, DateCell, ReferenceCell, RowCheckbox, VirtualDefaultCell, VirtualDisplayNameCell } from '.'
 
+const _cache = new CellMeasurerCache({
+  fixedWidth: true,
+  minHeight: 25,
+})
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
@@ -386,13 +392,14 @@ export const VirtualizedTable = <T extends GenericContent = GenericContent>(prop
           <Table
             className={classes.root}
             height={height}
+            overscanRowCount={10000}
             width={width}
             gridStyle={{
               direction: 'inherit',
               outline: 'none',
             }}
-            rowClassName={getRowClassName}
-            {...tableProps}>
+            {...tableProps}
+            rowClassName={getRowClassName}>
             {currentFieldsToDisplay.map((field) => {
               const currentField = field.field
 

From ae60a609aef18d53ba83989d4d4b551fb78d19c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Mon, 11 Mar 2024 12:51:05 +0100
Subject: [PATCH 3/7] feature: tree IOS text overflow

---
 apps/sensenet/src/components/tree/tree.tsx | 50 ++++++++++++++++++++--
 1 file changed, 47 insertions(+), 3 deletions(-)

diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
index 0c9dbae38..5c1d45a5c 100644
--- a/apps/sensenet/src/components/tree/tree.tsx
+++ b/apps/sensenet/src/components/tree/tree.tsx
@@ -1,4 +1,4 @@
-import { ListItem, ListItemIcon, ListItemText, List as MuiList } from '@material-ui/core'
+import { createStyles, ListItem, ListItemIcon, ListItemText, makeStyles, List as MuiList } from '@material-ui/core'
 import { GenericContent } from '@sensenet/default-content-types'
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { AutoSizer, Index, List, ListRowProps } from 'react-virtualized'
@@ -20,6 +20,42 @@ type TreeProps = {
   treeData: ItemType
 }
 
+const CHARACHTER_SPLIT = 6
+const getStringParts = (str: string) => {
+  return [str.slice(0, Math.abs(CHARACHTER_SPLIT - 1)), str.slice(Math.abs(CHARACHTER_SPLIT) * -1)]
+}
+
+const useStyles = makeStyles(() => {
+  return createStyles({
+    listItem: {
+      '& .text-container': {
+        display: 'flex',
+        flexWrap: 'no-wrap',
+        maxWidth: 'calc(100% - 56px)',
+        flex: 1,
+        '& .second': {
+          width: `${CHARACHTER_SPLIT}ch`,
+        },
+        '& .first': {
+          maxWidth: 'calc(100% - 56px)',
+          '& span': {
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+          },
+        },
+        '& > *': {
+          display: 'inline-block',
+          flex: 'unset',
+        },
+        '& .MuiTypography-root': {
+          display: 'inherit',
+        },
+      },
+    },
+  })
+})
+
 const ROW_HEIGHT = 48
 const LOAD_MORE_CLASS = 'loadMore'
 
@@ -30,6 +66,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
   const [contextMenuAnchor, setContextMenuAnchor] = useState<HTMLElement | null>(null)
   const [elements, setElements] = useState<Element[]>()
   const [rowHeight, setRowHeight] = useState(ROW_HEIGHT)
+  const classes = useStyles()
 
   const listItemRef = useCallback((node) => {
     if (node) {
@@ -108,9 +145,13 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
       })
     }
 
+    //Convert the name to two parts in order to display ... in the middle
+    const [firstPart, SecondPart] = getStringParts(item.Name)
+
     const nodeItem = (
       <ListItem
         ref={listItemRef}
+        className={classes.listItem}
         data-test={`menu-item-${item.DisplayName?.replace(/\s+/g, '-').toLowerCase()}`}
         onClick={onClick}
         onContextMenu={(ev) => {
@@ -125,7 +166,10 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
         <ListItemIcon>
           <Icon item={item} />
         </ListItemIcon>
-        <ListItemText primary={item.DisplayName} />
+        <div className="text-container">
+          <ListItemText primary={firstPart} className="first" />
+          <ListItemText primary={SecondPart} className="second" />
+        </div>
       </ListItem>
     )
 
@@ -180,7 +224,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
           <List
             height={height}
             width={width}
-            overscanRowCount={10}
+            overscanRowCount={10000}
             ref={listRef}
             rowHeight={rowHeightFunc}
             onRowsRendered={() => {

From 26d660b02f27d42fff7b5f4b62f5f0af0ae53334 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Mon, 11 Mar 2024 13:23:07 +0100
Subject: [PATCH 4/7] fix: getStringParts function

---
 apps/sensenet/src/components/tree/tree.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
index 5c1d45a5c..964c3df24 100644
--- a/apps/sensenet/src/components/tree/tree.tsx
+++ b/apps/sensenet/src/components/tree/tree.tsx
@@ -20,9 +20,9 @@ type TreeProps = {
   treeData: ItemType
 }
 
-const CHARACHTER_SPLIT = 6
+const CHARACHTER_SPLIT = 10
 const getStringParts = (str: string) => {
-  return [str.slice(0, Math.abs(CHARACHTER_SPLIT - 1)), str.slice(Math.abs(CHARACHTER_SPLIT) * -1)]
+  return [str.slice(0, CHARACHTER_SPLIT * -1), str.slice(CHARACHTER_SPLIT * -1)]
 }
 
 const useStyles = makeStyles(() => {
@@ -33,7 +33,7 @@ const useStyles = makeStyles(() => {
         flexWrap: 'no-wrap',
         maxWidth: 'calc(100% - 56px)',
         flex: 1,
-        '& .second': {
+        '& .second span': {
           width: `${CHARACHTER_SPLIT}ch`,
         },
         '& .first': {
@@ -162,6 +162,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
         selected={activeItemPath === item.Path}
         key={keyPrefix}
         style={{ paddingLeft }}
+        data-item-name={item.Name}
         button>
         <ListItemIcon>
           <Icon item={item} />

From cc53ef415c32f3cfd521e2aa7e182c83ca60e5c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Mon, 11 Mar 2024 13:28:14 +0100
Subject: [PATCH 5/7] feature: add tooltip

---
 apps/sensenet/src/components/tree/tree.tsx | 58 +++++++++++++---------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
index 964c3df24..77039c468 100644
--- a/apps/sensenet/src/components/tree/tree.tsx
+++ b/apps/sensenet/src/components/tree/tree.tsx
@@ -1,4 +1,12 @@
-import { createStyles, ListItem, ListItemIcon, ListItemText, makeStyles, List as MuiList } from '@material-ui/core'
+import {
+  createStyles,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  makeStyles,
+  List as MuiList,
+  Tooltip,
+} from '@material-ui/core'
 import { GenericContent } from '@sensenet/default-content-types'
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { AutoSizer, Index, List, ListRowProps } from 'react-virtualized'
@@ -149,29 +157,31 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
     const [firstPart, SecondPart] = getStringParts(item.Name)
 
     const nodeItem = (
-      <ListItem
-        ref={listItemRef}
-        className={classes.listItem}
-        data-test={`menu-item-${item.DisplayName?.replace(/\s+/g, '-').toLowerCase()}`}
-        onClick={onClick}
-        onContextMenu={(ev) => {
-          ev.preventDefault()
-          setContextMenuAnchor(ev.currentTarget)
-          setActiveContent(item)
-        }}
-        selected={activeItemPath === item.Path}
-        key={keyPrefix}
-        style={{ paddingLeft }}
-        data-item-name={item.Name}
-        button>
-        <ListItemIcon>
-          <Icon item={item} />
-        </ListItemIcon>
-        <div className="text-container">
-          <ListItemText primary={firstPart} className="first" />
-          <ListItemText primary={SecondPart} className="second" />
-        </div>
-      </ListItem>
+      <Tooltip title={item.Name} placement="bottom">
+        <ListItem
+          ref={listItemRef}
+          className={classes.listItem}
+          data-test={`menu-item-${item.DisplayName?.replace(/\s+/g, '-').toLowerCase()}`}
+          onClick={onClick}
+          onContextMenu={(ev) => {
+            ev.preventDefault()
+            setContextMenuAnchor(ev.currentTarget)
+            setActiveContent(item)
+          }}
+          selected={activeItemPath === item.Path}
+          key={keyPrefix}
+          style={{ paddingLeft }}
+          data-item-name={item.Name}
+          button>
+          <ListItemIcon>
+            <Icon item={item} />
+          </ListItemIcon>
+          <div className="text-container">
+            <ListItemText primary={firstPart} className="first" />
+            <ListItemText primary={SecondPart} className="second" />
+          </div>
+        </ListItem>
+      </Tooltip>
     )
 
     if (item.hasNextPage && item.children && !isLoading) {

From 9e4ead0e827e2a371a0ac2fed599cd66f229ed82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Mon, 11 Mar 2024 13:53:56 +0100
Subject: [PATCH 6/7] fix:remove unused variables

---
 .../src/ContentList/virtualized-table.tsx                   | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx b/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx
index 248b447c1..09d153882 100644
--- a/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx
+++ b/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx
@@ -14,7 +14,6 @@ import clsx from 'clsx'
 import React, { useCallback, useMemo } from 'react'
 import {
   AutoSizer,
-  CellMeasurerCache,
   Column,
   Index,
   RowMouseEventHandlerParams,
@@ -26,11 +25,6 @@ import {
 import { ColumnSetting, ContentListBaseProps } from './content-list-base-props'
 import { ActionsCell, DateCell, ReferenceCell, RowCheckbox, VirtualDefaultCell, VirtualDisplayNameCell } from '.'
 
-const _cache = new CellMeasurerCache({
-  fixedWidth: true,
-  minHeight: 25,
-})
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {

From 52b0c13aa3c62705bb157a860a3a789560c60556 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Tue, 12 Mar 2024 10:06:23 +0100
Subject: [PATCH 7/7] fix: UX ... line wrap

---
 apps/sensenet/src/components/content-list/content-list.tsx | 1 +
 apps/sensenet/src/components/tree/tree.tsx                 | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/sensenet/src/components/content-list/content-list.tsx b/apps/sensenet/src/components/content-list/content-list.tsx
index 4f2b08631..8e9a9c353 100644
--- a/apps/sensenet/src/components/content-list/content-list.tsx
+++ b/apps/sensenet/src/components/content-list/content-list.tsx
@@ -738,6 +738,7 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
                 top: 'unset',
                 height: 'auto',
                 overflow: 'initial',
+                padding: '5px 0px',
               },
               onRowDoubleClick: onItemDoubleClickFunc,
               disableHeader: props.hideHeader,
diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
index 77039c468..cd852adcd 100644
--- a/apps/sensenet/src/components/tree/tree.tsx
+++ b/apps/sensenet/src/components/tree/tree.tsx
@@ -43,9 +43,10 @@ const useStyles = makeStyles(() => {
         flex: 1,
         '& .second span': {
           width: `${CHARACHTER_SPLIT}ch`,
+          textWrap: 'nowrap',
         },
         '& .first': {
-          maxWidth: 'calc(100% - 56px)',
+          maxWidth: 'calc(100% - 56px - 5ch)',
           '& span': {
             overflow: 'hidden',
             whiteSpace: 'nowrap',
@@ -248,7 +249,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
             containerStyle={{ overflow: 'unset' }}
             rowRenderer={rowRenderer}
             rowCount={itemCount}
-            style={{ outline: 'none', overflow: 'unset' }}
+            style={{ outline: 'none' }}
           />
         )}
       </AutoSizer>