Fix: Body Scanner layout (#24140)

* Fix: Body Scanner layout

* Rebuild TGUI

* Rebuild

---------

Co-authored-by: S34N <12197162+S34NW@users.noreply.github.com>

code/game/machinery/adv_med.dm

@@ -228,10 +228,10 @@
 /obj/machinery/bodyscanner/ui_state(mob/user)
 	return GLOB.default_state
 
-/obj/machinery/bodyscanner/ui_interact(mob/user, datum/tgui/ui = null)
+/obj/machinery/bodyscanner/ui_interact(mob/user, datum/tgui/ui)
 	ui = SStgui.try_update_ui(user, src, ui)
 	if(!ui)
-		ui = new(user, src, "BodyScanner", "Body Scanner")
+		ui = new(user, src, "BodyScanner")
 		ui.open()
 
 /obj/machinery/bodyscanner/ui_data(mob/user)

tgui/packages/tgui/interfaces/BodyScanner.js

@@ -1,4 +1,5 @@
 import { round } from 'common/math';
+import { capitalize } from 'common/string';
 import { useBackend } from '../backend';
 import {
   AnimatedNumber,
@@ -102,7 +103,7 @@ export const BodyScanner = (props, context) => {
     <BodyScannerEmpty />
   );
   return (
-    <Window width={690} height={600}>
+    <Window width={700} height={600} title="Body Scanner">
       <Window.Content scrollable>{body}</Window.Content>
     </Window>
   );
@@ -156,9 +157,9 @@ const BodyScannerMainOccupant = (props, context) => {
           {stats[occupant.stat][1]}
         </LabeledList.Item>
         <LabeledList.Item label="Temperature">
-          <AnimatedNumber value={round(occupant.bodyTempC, 0)} />
+          <AnimatedNumber value={round(occupant.bodyTempC)} />
           &deg;C,&nbsp;
-          <AnimatedNumber value={round(occupant.bodyTempF, 0)} />
+          <AnimatedNumber value={round(occupant.bodyTempF)} />
           &deg;F
         </LabeledList.Item>
         <LabeledList.Item label="Implants">
@@ -245,7 +246,7 @@ const BodyScannerMainDamageBar = (props) => {
       mb={!!props.marginBottom && '0.5rem'}
       ranges={damageRange}
     >
-      {round(props.value, 0)}
+      {round(props.value)}
     </ProgressBar>
   );
 };
@@ -268,7 +269,7 @@ const BodyScannerMainOrgansExternal = (props) => {
           <Table.Cell textAlign="right">Injuries</Table.Cell>
         </Table.Row>
         {props.organs.map((o, i) => (
-          <Table.Row key={i} textTransform="capitalize">
+          <Table.Row key={i}>
             <Table.Cell
               color={
                 (!!o.status.dead && 'bad') ||
@@ -283,35 +284,41 @@ const BodyScannerMainOrgansExternal = (props) => {
               }
               width="33%"
             >
-              {o.name}
+              {capitalize(o.name)}
             </Table.Cell>
-            <Table.Cell textAlign="center" q>
+            <Table.Cell textAlign="center">
               <ProgressBar
+                m={-0.5}
                 min="0"
                 max={o.maxHealth}
                 mt={i > 0 && '0.5rem'}
                 value={o.totalLoss / o.maxHealth}
                 ranges={damageRange}
               >
-                <Box float="left" inline>
+                <Stack>
+                  <Tooltip content="Total damage">
+                    <Stack.Item>
+                      <Icon name="heartbeat" mr={0.5} />
+                      {round(o.totalLoss)}
+                    </Stack.Item>
+                  </Tooltip>
                   {!!o.bruteLoss && (
-                    <Tooltip position="top" content="Brute damage">
-                      <Box inline position="relative">
-                        <Icon name="bone" />
-                        {round(o.bruteLoss, 0)}&nbsp;
-                      </Box>
+                    <Tooltip content="Brute damage">
+                      <Stack.Item grow>
+                        <Icon name="bone" mr={0.5} />
+                        {round(o.bruteLoss)}
+                      </Stack.Item>
                     </Tooltip>
                   )}
                   {!!o.fireLoss && (
-                    <Tooltip position="top" content="Burn damage">
-                      <Box inline position="relative">
-                        <Icon name="fire" />
-                        {round(o.fireLoss, 0)}
-                      </Box>
+                    <Tooltip content="Burn damage">
+                      <Stack.Item>
+                        <Icon name="fire" mr={0.5} />
+                        {round(o.fireLoss)}
+                      </Stack.Item>
                     </Tooltip>
                   )}
-                </Box>
-                <Box inline>{round(o.totalLoss, 0)}</Box>
+                </Stack>
               </ProgressBar>
             </Table.Cell>
             <Table.Cell
@@ -370,7 +377,7 @@ const BodyScannerMainOrgansInternal = (props) => {
           <Table.Cell textAlign="right">Injuries</Table.Cell>
         </Table.Row>
         {props.organs.map((o, i) => (
-          <Table.Row key={i} textTransform="capitalize">
+          <Table.Row key={i}>
             <Table.Cell
               color={
                 (!!o.dead && 'bad') ||
@@ -379,7 +386,7 @@ const BodyScannerMainOrgansInternal = (props) => {
               }
               width="33%"
             >
-              {o.name}
+              {capitalize(o.name)}
             </Table.Cell>
             <Table.Cell textAlign="center">
               <ProgressBar
@@ -389,7 +396,7 @@ const BodyScannerMainOrgansInternal = (props) => {
                 mt={i > 0 && '0.5rem'}
                 ranges={damageRange}
               >
-                {round(o.damage, 0)}
+                {round(o.damage)}
               </ProgressBar>
             </Table.Cell>
             <Table.Cell