From 7072189523403d0a2d4960b333b33139493db77d Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Wed, 2 Oct 2024 14:12:24 +0200
Subject: [PATCH] feat: move layer size to the top (#9165)

Signed-off-by: Philippe Martin <phmartin@redhat.com>
---
 .../renderer/src/lib/image/ImageDetailsFilesLayers.spec.ts  | 6 ++----
 .../renderer/src/lib/image/ImageDetailsFilesLayers.svelte   | 4 +---
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/renderer/src/lib/image/ImageDetailsFilesLayers.spec.ts b/packages/renderer/src/lib/image/ImageDetailsFilesLayers.spec.ts
index dc0af236412d4..bd6ade6cdce04 100644
--- a/packages/renderer/src/lib/image/ImageDetailsFilesLayers.spec.ts
+++ b/packages/renderer/src/lib/image/ImageDetailsFilesLayers.spec.ts
@@ -56,12 +56,10 @@ test('render', async () => {
   render(ImageDetailsFilesLayers, { layers });
   const rows = screen.getAllByRole('row');
   expect(rows.length).toBe(2);
-  within(rows[0]).getByText('layer1');
-  within(rows[0]).getByText('on disk: 1 kB');
+  within(rows[0]).getByText('1 kB • layer1');
   within(rows[0]).getByText('contribute to FS: +900 B');
   within(rows[0]).getByText('total FS: 2 kB');
-  within(rows[1]).getByText('layer2');
-  within(rows[1]).getByText('on disk: 0 B');
+  within(rows[1]).getByText('0 B • layer2');
   within(rows[1]).getByText('contribute to FS: -300 B');
   within(rows[1]).getByText('total FS: 1.7 kB');
 });
diff --git a/packages/renderer/src/lib/image/ImageDetailsFilesLayers.svelte b/packages/renderer/src/lib/image/ImageDetailsFilesLayers.svelte
index 4549927806388..f6f29f8fa27ff 100644
--- a/packages/renderer/src/lib/image/ImageDetailsFilesLayers.svelte
+++ b/packages/renderer/src/lib/image/ImageDetailsFilesLayers.svelte
@@ -26,11 +26,9 @@ function onLayerSelected(layer: ImageFilesystemLayerUI) {
     class:bg-[var(--pd-content-card-bg)]={layer.id !== currentLayerId}
     class:bg-[var(--pd-content-card-selected-bg)]={layer.id === currentLayerId}>
     <div>
+      <div class="text-sm opacity-70">{new ImageUtils().getHumanSize(layer.sizeInArchive)} &bull; {layer.id}</div>
       <ImageDetailsFilesExpandableCommand command={layer.createdBy} />
-      <div class="text-sm opacity-70">{layer.id}</div>
       <div class="text-sm opacity-70">
-        <span>on disk: {new ImageUtils().getHumanSize(layer.sizeInArchive)}</span>
-        <span> | </span>
         <span>contribute to FS: {signedHumanSize(layer.sizeInContainer)}</span>
         <span> | </span>
         <span>total FS: {new ImageUtils().getHumanSize(layer.stackTree.size)}</span>