Simplify BOM table rendering (#11795)

src/frontend/src/tables/bom/BomTable.tsx

@@ -13,12 +13,11 @@ import useTable from '@lib/hooks/UseTable';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
 import { t } from '@lingui/core/macro';
-import { ActionIcon, Alert, Group, Stack, Text, Tooltip } from '@mantine/core';
+import { Alert, Group, Stack, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import {
   IconArrowRight,
   IconCircleCheck,
-  IconExclamationCircle,
   IconFileUpload,
   IconLock,
   IconPlus,
@@ -99,9 +98,16 @@ export function BomTable({
             );
           }
 
+          if (!record.validated) {
+            extra.push(
+              <Text key='not-validated' c='red'>
+                {t`This BOM item has not been validated`}
+              </Text>
+            );
+          }
+
           return (
             part && (
-              <Group gap='xs' justify='space-between' wrap='nowrap'>
               <TableHoverCard
                 value={
                   <Thumbnail
@@ -110,17 +116,10 @@ export function BomTable({
                     text={part.full_name}
                   />
                 }
+                iconColor={record.validated ? undefined : 'red'}
                 extra={extra}
                 title={t`Part Information`}
               />
-                {!record.validated && (
-                  <Tooltip label={t`This BOM item has not been validated`}>
-                    <ActionIcon color='red' variant='transparent' size='sm'>
-                      <IconExclamationCircle />
-                    </ActionIcon>
-                  </Tooltip>
-                )}
-              </Group>
             )
           );
         }