fix(files_trashbin): previews crop support

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

1 files changed, 33 insertions, 11 deletions

diff --git a/apps/files/src/mixins/fileslist-row.scss b/apps/files/src/mixins/fileslist-row.scss
index 9b0c3197b76..9ebd8f00b36 100644
--- a/apps/files/src/mixins/fileslist-row.scss
+++ b/apps/files/src/mixins/fileslist-row.scss
@@ -20,25 +20,29 @@
  *
  */
 td, th {
+	display: flex;
+	align-items: center;
+	flex: 0 0 var(--row-height);
+	justify-content: center;
+	width: var(--row-height);
 	height: var(--row-height);
-	vertical-align: middle;
-	padding: 0px;
+	padding: 0;
 	border: none;
 }
 
 .files-list__row-checkbox {
 	width: var(--row-height);
 	&::v-deep .checkbox-radio-switch {
-		--icon-size: var(--checkbox-size);
-
 		display: flex;
 		justify-content: center;
 
+		--icon-size: var(--checkbox-size);
+
 		label.checkbox-radio-switch__label {
-			margin: 0;
-			height: var(--clickable-area);
 			width: var(--clickable-area);
-			padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2)
+			height: var(--clickable-area);
+			margin: 0;
+			padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2);
 		}
 
 		.checkbox-radio-switch__icon {
@@ -48,16 +52,34 @@ td, th {
 }
 
 .files-list__row-icon {
-	// Remove left padding to look nicer with the checkbox
-	// => ico preview size + one checkbox td padding
-	width: calc(var(--icon-preview-size) + var(--checkbox-padding));
-	padding-right: var(--checkbox-padding);
+	flex: 0 0 var(--icon-preview-size);
+	justify-content: left;
+	// Show same padding as the checkbox right padding for visual balance
+	margin-right: var(--checkbox-padding);
 	color: var(--color-primary-element);
+
 	& > span {
 		justify-content: flex-start;
 	}
+
 	&::v-deep svg {
 		width: var(--icon-preview-size);
 		height: var(--icon-preview-size);
 	}
+
+	&-preview {
+		width: var(--icon-preview-size);
+		height: var(--icon-preview-size);
+		// Center and contain the preview
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: contain;
+		border-radius: var(--border-radius);
+		overflow: hidden;
+	}
+}
+
+.files-list__row-name {
+	flex: 1 1 100%;
+	justify-content: left;
 }