Replace table with grid

frontend/src/components/tasks/partials/attachments.vue

@@ -27,21 +27,20 @@
 			v-if="attachments.length > 0"
 			class="files"
 		>
-			<table class="table table-striped">
-				<tr
+			<div
 				v-for="a in attachments"
 				:key="a.id"
-					class="clickable"
+				class="grid-item clickable"
 				@click="viewOrDownload(a)"
 			>
-					<td class="preview-column">
+				<div class="preview-column">
 					<FilePreview
 						v-if="canPreview(a)"
 						class="attachment-preview"
 						:model-value="a"
 					/>
-					</td>
-					<td>
+				</div>
+				<div>
 					<div class="filename">
 						{{ a.file.name }}
 						<span
@@ -109,9 +108,8 @@
 							</BaseButton>
 						</p>
 					</div>
-					</td>
-				</tr>
-			</table>
+				</div>
+			</div>
 		</div>
 
 		<x-button
@@ -449,7 +447,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 }
 
 .preview-column {
-	max-width: 75px;
+	max-width: 125px;
 }
 
 .attachment-preview {
@@ -460,6 +458,12 @@ async function setCoverImage(attachment: IAttachment | null) {
 	cursor: pointer;
 }
 
+.grid-item {
+	display: grid;
+	grid-template-columns: 140px 1fr;
+	align-items: center;
+}
+
 .is-task-cover {
 	background: var(--primary);
 	color: var(--white);