Merge pull request #51658 from nextcloud/backport/51471/stable30

[stable30] fix(files): Ensure actions never overflow filename

Author: artonge

apps/files/src/components/FilesListVirtual.vue

@@ -762,8 +762,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;
@@ -846,7 +846,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 {
@@ -857,4 +857,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>

cypress/e2e/files/scrolling.cy.ts

@@ -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')
 		})