From b888a0fc6a5443f6f7cfe449641f5c09578bb122 Mon Sep 17 00:00:00 2001
From: Raphael Schweikert <Raphael.Schweikert1@swisscom.com>
Date: Mon, 28 Oct 2024 21:50:36 +0100
Subject: [PATCH] feat(editor): display size in file summary

---
 src/main/frontend/sections/output/FileMessageOutput.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/main/frontend/sections/output/FileMessageOutput.tsx b/src/main/frontend/sections/output/FileMessageOutput.tsx
index 061405c..eaf9cbf 100644
--- a/src/main/frontend/sections/output/FileMessageOutput.tsx
+++ b/src/main/frontend/sections/output/FileMessageOutput.tsx
@@ -15,7 +15,7 @@ const Elm = styled('div')`
 	border-radius: 12px;
 	display: grid;
 	gap: 6px;
-	grid-template-areas: 'icon name . download' 'icon type . download';
+	grid-template-areas: 'icon name name download' 'icon type size download';
 	grid-template-columns: max-content max-content 1fr max-content;
 	> coral-icon {
 		grid-area: icon;
@@ -28,6 +28,9 @@ const Elm = styled('div')`
 	> .type {
 		grid-area: type;
 	}
+	> .size {
+		grid-area: size;
+	}
 	> a {
 		grid-area: download;
 	}
@@ -77,6 +80,7 @@ export const FileMessageOutput: FC<{ message: FileMessage }> = ({ message }) =>
 			<coral-icon icon={icon} size="L" />
 			<span className="name">{message.name}</span>
 			<small className="type">{message.mime}</small>
+			<small className="size">{message.blob?.size} bytes</small>
 			<a href={URL.createObjectURL(message.blob!)} download={message.name}>
 				<button type="button" is="coral-button" icon="download">
 					Download