From 8abfa759a400337de778a2962ab33a50ec346566 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 16 Jun 2024 21:12:06 +1000
Subject: [PATCH] feat(ui): better HUD

---
 .../features/controlLayers/components/HeadsUpDisplay.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx b/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx
index 1172ec2ede..ba58858304 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx
@@ -13,13 +13,13 @@ export const HeadsUpDisplay = memo(() => {
   return (
     <Flex flexDir="column" bg="blackAlpha.400" borderBottomEndRadius="base" p={2} minW={64} gap={2}>
       <HUDItem label="Zoom" value={`${round(stageAttrs.scale * 100, 2)}%`} />
-      <HUDItem label="Document Size" value={`${document.width}×${document.height}`} />
+      <HUDItem label="Document Size" value={`${document.width}×${document.height} px`} />
       <HUDItem label="Stage Pos" value={`${round(stageAttrs.x, 3)}, ${round(stageAttrs.y, 3)}`} />
       <HUDItem
         label="Stage Size"
-        value={`${round(stageAttrs.width / stageAttrs.scale, 2)}, ${round(stageAttrs.height / stageAttrs.scale, 2)}`}
+        value={`${round(stageAttrs.width / stageAttrs.scale, 2)}×${round(stageAttrs.height / stageAttrs.scale, 2)} px`}
       />
-      <HUDItem label="BBox Size" value={`${bbox.width}×${bbox.height}`} />
+      <HUDItem label="BBox Size" value={`${bbox.width}×${bbox.height} px`} />
       <HUDItem label="BBox Position" value={`${bbox.x}, ${bbox.y}`} />
       <HUDItem label="BBox Width % 8" value={round(bbox.width % 8, 2)} />
       <HUDItem label="BBox Height % 8" value={round(bbox.height % 8, 2)} />