From 4eb0df256c389b5e40da31c1777952c26071e640 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Sat, 25 May 2024 12:06:23 +0200
Subject: [PATCH] Improve preview spacing

---
 .../src/components/tasks/partials/attachments.vue  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index ff2a25305..9cbed8eb9 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -39,7 +39,7 @@
 						:model-value="a"
 					/>
 				</div>
-				<div>
+				<div class="attachment-info-column">
 					<div class="filename">
 						{{ a.file.name }}
 						<span
@@ -311,7 +311,6 @@ async function setCoverImage(attachment: IAttachment | null) {
 	grid-template-columns: 9rem 1fr;
 	align-items: center;
 	
-	margin-bottom: .5rem;
 	padding: .5rem;
 	
 	transition: background-color $transition;
@@ -336,6 +335,8 @@ async function setCoverImage(attachment: IAttachment | null) {
 .info {
 	color: var(--grey-500);
 	font-size: .9rem;
+	display: flex;
+	flex-direction: column;
 
 	p {
 		margin-bottom: 0;
@@ -393,6 +394,12 @@ async function setCoverImage(attachment: IAttachment | null) {
 	}
 }
 
+.attachment-info-column {
+	display: flex;
+	flex-flow: column wrap;
+	align-self: start;
+}
+
 .attachment-info-meta {
 	display: flex;
 	align-items: center;
@@ -455,10 +462,11 @@ async function setCoverImage(attachment: IAttachment | null) {
 
 .preview-column {
 	max-width: 8rem;
+	height: 5.2rem;
 }
 
 .attachment-preview {
-	max-height: 4rem;
+	height: 100%;
 }
 
 .is-task-cover {