upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-04-22 23:03:00 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 78

fix(files): Ensure actions never overflow filename

Browse source 
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2025-03-13 19:07:40 +01:00
parent 91c94f19e0
commit 35d4e562eb
No known key found for this signature in database
GPG key ID: 45FAE7268762B400
2 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
apps/files/src/components/FilesListVirtual.vue
View file

@ -864,8 +864,8 @@ export default defineComponent({
.files-list--grid tbody.files-list__tbody {
--item-padding: 16px;
--icon-preview-size: 166px;
--name-height: 32px;
--mtime-height: 16px;
--name-height: var(--default-clickable-area);
--mtime-height: calc(var(--font-size-small) + var(--default-grid-baseline));
--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
--checkbox-padding: 0px;
@ -947,7 +947,7 @@ export default defineComponent({
.files-list__row-mtime {
width: var(--icon-preview-size);
height: var(--mtime-height);
font-size: calc(var(--default-font-size) - 4px);
font-size: var(--font-size-small);
}
.files-list__row-actions {
@ -958,4 +958,21 @@ export default defineComponent({
height: var(--clickable-area);
}
}
@media screen and (max-width: 768px) {
// there is no mtime
.files-list--grid tbody.files-list__tbody {
--mtime-height: 0px;
// so we move the action to the name
.files-list__row-actions {
inset-block-end: var(--item-padding);
}
// and we need to keep space on the name for the actions
.files-list__row-name-text {
padding-inline-end: var(--clickable-area) !important;
}
}
}
</style>

2
cypress/e2e/files/scrolling.cy.ts
View file

@ -228,9 +228,7 @@ describe('files: Scrolling to selected file in file list (GRID MODE)', { testIso
.and(beOverlappedByTableHeader)
}
// see footer is only shown partly
cy.get('tfoot')
.should(notBeFullyInViewport)
.contains('span', '12 files')
.should('be.visible')
})