diff --git a/lib/components/FilePicker/FileList.scss b/lib/components/FilePicker/FileList.scss index 12d1d1e5..f65188a9 100644 --- a/lib/components/FilePicker/FileList.scss +++ b/lib/components/FilePicker/FileList.scss @@ -8,8 +8,8 @@ tr.file-picker__row { padding-inline: 14px 0; border-bottom: none; // remove lines between elements - // Make "size" and "modified" rows end aligned - &:not(:nth-of-type(2)) { + // Make column "size" end aligned + &.row-size { text-align: end; padding-inline: 0 14px; // align with header } diff --git a/lib/components/FilePicker/FileList.vue b/lib/components/FilePicker/FileList.vue index af52f64a..ed33af77 100644 --- a/lib/components/FilePicker/FileList.vue +++ b/lib/components/FilePicker/FileList.vue @@ -186,7 +186,7 @@ function onChangeDirectory(dir: Node) { width: 44px; } &.row-name { - width: 150px; + width: 230px; } &.row-size { width: 100px; @@ -198,7 +198,7 @@ function onChangeDirectory(dir: Node) { // >> begin of hacks for table header sorting buttons // TODO: Remove this hack after ... is available - th:nth-of-type(2) { + th:not(.row-size) { :deep(.button-vue__wrapper) { justify-content: start; flex-direction: row-reverse; @@ -207,7 +207,7 @@ function onChangeDirectory(dir: Node) { padding-inline: 16px 4px; } } - th:not(:nth-of-type(2)) :deep(.button-vue__wrapper) { + th.row-size :deep(.button-vue__wrapper) { justify-content: end; } th :deep(.button-vue__wrapper) { diff --git a/lib/components/FilePicker/FileListRow.vue b/lib/components/FilePicker/FileListRow.vue index 46c1d5aa..6757bf1d 100644 --- a/lib/components/FilePicker/FileListRow.vue +++ b/lib/components/FilePicker/FileListRow.vue @@ -11,7 +11,7 @@
-
+
@@ -112,6 +112,9 @@ function handleKeyDown(event: KeyboardEvent) { &__file-name { padding-inline-start: 6px; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; } }