diff --git a/packages/file-handling/src/dbp-file-handling-clipboard.js b/packages/file-handling/src/dbp-file-handling-clipboard.js index ef5efc73d4bc26ff868e8aa9b64acd007c69de7b..cb634f82957e63a148fab31c35538a8e8917f47c 100644 --- a/packages/file-handling/src/dbp-file-handling-clipboard.js +++ b/packages/file-handling/src/dbp-file-handling-clipboard.js @@ -357,7 +357,11 @@ export class FileHandlingClipboard extends ScopedElementsMixin(DBPLitElement) { let files = []; for(let i = 0; i < this.clipboardFiles.files.length; i ++) { - files[i] = html`<div class="clipboard-list"><strong>${this.clipboardFiles.files[i].name}</strong> ${humanFileSize(this.clipboardFiles.files[i].size)}</div>`; + files[i] = html` + <div class="clipboard-list"> + <div class="clipboard-list-name"><strong>${this.clipboardFiles.files[i].name}</strong></div> + <div class="clipboard-list-size">${humanFileSize(this.clipboardFiles.files[i].size)}</div> + </div>`; } return files; } @@ -430,7 +434,7 @@ export class FileHandlingClipboard extends ScopedElementsMixin(DBPLitElement) { } .clipboard-container .inner{ - overflow-y: auto; + overflow-y: scroll; text-align: center; width: 100%; } @@ -469,7 +473,9 @@ export class FileHandlingClipboard extends ScopedElementsMixin(DBPLitElement) { .clipboard-list{ padding: 1rem 0; - border-top: 1px solid #888; + border-top: 1px solid #eee; + display: flex; + justify-content: space-between; } .button-wrapper{ @@ -480,6 +486,17 @@ export class FileHandlingClipboard extends ScopedElementsMixin(DBPLitElement) { .border{ border-top:solid 1px #888; } + + .clipboard-list-name{ + width: 80%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .clipboard-list-size{ + + } @media only screen @@ -505,6 +522,10 @@ export class FileHandlingClipboard extends ScopedElementsMixin(DBPLitElement) { .button-wrapper{ flex-direction: column; } + + .clipboard-container .inner{ + overflow-y: auto; + } } `; }