fix(striker-ui): prevent text overlap in anvil summary

striker-ui/components/Anvils/AnvilSummary.tsx

@@ -90,7 +90,8 @@ const AnvilSummary: FC<AnvilSummaryProps> = (props) => {
       anvil && (
         <Grid
           alignItems="center"
-          columns={4}
+          columns={20}
+          columnSpacing="0.5em"
           container
           sx={{
             [`& > .${gridClasses.item}:nth-child(-n + 4)`]: {
@@ -107,38 +108,34 @@ const AnvilSummary: FC<AnvilSummaryProps> = (props) => {
             let servers: ReactNode;
 
             if (['offline', 'online'].includes(state)) {
-              servers = (
-                <BodyText variant="caption" whiteSpace="nowrap">
-                  Servers{' '}
-                  <InlineMonoText sx={{ paddingRight: 0 }}>
-                    {serverCount}
-                  </InlineMonoText>
-                </BodyText>
-              );
+              servers = <MonoText variant="caption">{serverCount}</MonoText>;
             } else {
               stateValue = `${stateProgress}%`;
             }
 
             return [
-              <Grid item key={`${uuid}-state-label`} xs={1}>
+              <Grid item key={`${uuid}-state-label`} xs={7}>
                 <BodyText variant="caption" whiteSpace="nowrap">
                   {name}
                 </BodyText>
               </Grid>,
-              <Grid item key={`${uuid}-state`} xs={1}>
+              <Grid item key={`${uuid}-state`} xs={5}>
                 <MonoText inheritColour color={stateColour}>
                   {stateValue}
                 </MonoText>
               </Grid>,
-              <Grid item key={`${uuid}-divider`} xs={1}>
-                <Divider sx={{ marginBottom: '-.2em' }} />
+              <Grid item key={`${uuid}-divider`} xs>
+                <Divider sx={{ marginBottom: '-.4em' }} />
+              </Grid>,
+              <Grid item key={`${uuid}-server-label`} width="2.2em">
+                {servers && <BodyText variant="caption">Servers</BodyText>}
               </Grid>,
               <Grid
                 display="flex"
                 item
                 justifyContent="flex-end"
                 key={`${uuid}-server-count`}
-                xs={1}
+                width="2em"
               >
                 {servers}
               </Grid>,
@@ -167,13 +164,13 @@ const AnvilSummary: FC<AnvilSummaryProps> = (props) => {
             alignItems="center"
             columns={2}
             container
-            minWidth="calc(0% + 3.2em)"
             sx={{
+              width: '3.7em',
+
               [`& > .${gridClasses.item}:nth-child(-n + 2)`]: {
                 marginBottom: '-.6em',
               },
             }}
-            width="calc(0% + 3.2em)"
           >
             <Grid item xs={1}>
               <BodyText variant="caption">Cores</BodyText>

striker-ui/components/Anvils/AnvilSummaryList.tsx

@@ -1,3 +1,4 @@
+import { gridClasses } from '@mui/material';
 import { FC, ReactNode, useMemo } from 'react';
 
 import AnvilSummary from './AnvilSummary';
@@ -27,7 +28,7 @@ const AnvilSummaryList: FC = () => {
     () =>
       anvils && (
         <Grid
-          columns={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }}
+          columns={{ xs: 1, sm: 2, md: 3, xl: 4 }}
           layout={Object.values(anvils).reduce<GridLayout>(
             (previous, current) => {
               const { description, name, uuid } = current;
@@ -36,7 +37,7 @@ const AnvilSummaryList: FC = () => {
 
               previous[key] = {
                 children: (
-                  <InnerPanel width="22em">
+                  <InnerPanel height="100%" mv={0}>
                     <InnerPanelHeader>
                       <BodyText
                         overflow="hidden"
@@ -57,6 +58,14 @@ const AnvilSummaryList: FC = () => {
             },
             {},
           )}
+          spacing="1em"
+          sx={{
+            alignContent: 'stretch',
+
+            [`& > .${gridClasses.item}`]: {
+              minWidth: '20em',
+            },
+          }}
         />
       ),
     [anvils],

striker-ui/types/AnvilSummary.d.ts

@@ -1,7 +1,3 @@
-type AnvilSummaryOptionalProps = {
-  loading?: boolean;
-};
-
-type AnvilSummaryProps = AnvilSummaryOptionalProps & {
+type AnvilSummaryProps = {
   anvilUuid: string;
 };