diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index 4445868c2184fe972a04a36df79d3e4c5c0e33a3..44df2aa73c0559037142bdf4e7afd90eeb448f1c 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -4,7 +4,7 @@ import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 import * as fileHandlingStyles from '@dbp-toolkit/file-handling/src/styles';
-import {Icon} from '@dbp-toolkit/common';
+import {Icon, getShadowRootDocument} from '@dbp-toolkit/common';
 import {TabulatorFull as Tabulator} from 'tabulator-tables';
 import {humanFileSize} from '@dbp-toolkit/common/i18next';
 import {name as pkgName} from '@dbp-toolkit/file-handling/package.json';
@@ -156,13 +156,19 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
                             '<span class="checkmark" id="select_all_checkmark"></span>' +
                             '</label>',
                         field: 'type',
-                        headerSort: false,
+                        hozAlign: 'center',
                         width: 50,
+                        headerSort: false,
                         responsive: 1,
                         formatter: (cell, formatterParams, onRendered) => {
                             const icon_tag = that.getScopedTagName('dbp-icon');
-                            let icon = `<${icon_tag} name="empty-file" class="nextcloud-picker-icon"></${icon_tag}>`;
-                            return icon;
+                            let icon =
+                                `<${icon_tag} name="empty-file" class="nextcloud-picker-icon ` +
+                                `"></${icon_tag}>`;
+                            let div = getShadowRootDocument(this).createElement('div');
+                            div.innerHTML = icon;
+                            return div;
+
                         },
                     },
                     {
@@ -173,11 +179,11 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
                         field: 'name',
                         sorter: 'alphanum',
                         formatter: (cell) => {
-                            let data = cell.getRow().getData();
-                            if (data.edit) {
-                                cell.getElement().classList.add('fokus-edit');
-                            }
-                            return cell.getValue();
+                            var data = cell.getValue();
+                            let div = getShadowRootDocument(this).createElement('div');
+                            div.classList.add('filename');
+                            div.innerHTML = cell.getValue();
+                            return div;
                         },
                     },
                     {
@@ -187,9 +193,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
                         minWidth: 84,
                         field: 'size',
                         formatter: (cell, formatterParams, onRendered) => {
-                            return cell.getRow().getData().type === 'directory'
-                                ? ''
-                                : humanFileSize(cell.getValue());
+                            return humanFileSize(cell.getValue());
                         },
                     },
                     {
diff --git a/packages/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index f89491ed5ef33cae017c1549309e11168e1d65ca..4ac50b8056a1654311917168b5fdb9c90842e8f2 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -232,11 +232,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                         field: 'basename',
                         sorter: 'alphanum',
                         formatter: (cell) => {
-                            var data = cell.getRow().getData();
-                            if (data.edit) {
-                                cell.getElement().classList.add('fokus-edit');
-                            }
-                            return cell.getValue();
+                            var data = cell.getValue();
+                            let div = getShadowRootDocument(this).createElement('div');
+                            div.classList.add('filename');
+                            div.innerHTML = cell.getValue();
+                            return div;
                         },
                     },
                     {
@@ -2914,7 +2914,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             }
 
             .table-wrapper {
-                position: relative;
+                /*position: relative;*/
+                max-width: 100%;
+                width: 100%;
             }
 
             .button-container .checkmark::after {
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 9acf45fe9e0b76e7c3a670049d69cf266988501d..802c46319a815495d33d16ad9ac4dda04c80e06e 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -257,6 +257,13 @@ export function getFileHandlingCss() {
             min-height: 37px !important;
         }
 
+        .filename{
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 100%;
+            white-space: nowrap;
+        }
+        
         @media only screen and (orientation: portrait) and (max-width: 768px) {
             .tabulator .tabulator-tableHolder {
                 white-space: inherit;