diff --git a/src/components/v-list/v-list-group.vue b/src/components/v-list/v-list-group.vue index 809a40ba63..fd30a3c7b5 100644 --- a/src/components/v-list/v-list-group.vue +++ b/src/components/v-list/v-list-group.vue @@ -1,7 +1,7 @@ @@ -52,4 +55,15 @@ export default defineComponent({ ::v-deep .v-skeleton-loader { --v-skeleton-loader-background-color: var(--background-normal-alt); } + +.folders { + width: 100%; + overflow-x: hidden; + + ::v-deep .v-list-item-content { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } +} diff --git a/src/modules/files/compositions/use-folders.ts b/src/modules/files/compositions/use-folders.ts index bba7833353..d0b1eb4cc8 100644 --- a/src/modules/files/compositions/use-folders.ts +++ b/src/modules/files/compositions/use-folders.ts @@ -58,18 +58,20 @@ export default function useFolders() { export function nestFolders(rawFolders: FolderRaw[]) { return rawFolders - .map((folderRaw) => { - const folder: FolderRaw & Folder = { ...folderRaw }; - - const children = rawFolders.filter( - (childFolder) => childFolder.parent_folder === folderRaw.id - ); - - if (children.length > 0) { - folder.children = children; - } - - return folder; - }) + .map((rawFolder) => nestChildren(rawFolder, rawFolders)) .filter((folder) => folder.parent_folder === null); } + +export function nestChildren(rawFolder: FolderRaw, rawFolders: FolderRaw[]) { + const folder: FolderRaw & Folder = { ...rawFolder }; + + const children = rawFolders + .filter((childFolder) => childFolder.parent_folder === rawFolder.id) + .map((childRawFolder) => nestChildren(childRawFolder, rawFolders)); + + if (children.length > 0) { + folder.children = children; + } + + return folder; +}