From 35d4e562eb4139de48752a4d4391ff78a7c2666c Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Thu, 13 Mar 2025 19:07:40 +0100 Subject: fix(files): Ensure actions never overflow filename Signed-off-by: Ferdinand Thiessen --- apps/files/src/components/FilesListVirtual.vue | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) (limited to 'apps/files/src') diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue index 3042f54a319..4af696bca49 100644 --- a/apps/files/src/components/FilesListVirtual.vue +++ b/apps/files/src/components/FilesListVirtual.vue @@ -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; + } + } +} -- cgit v1.2.3