From 46a09d9e908c9297c761d335741b9359614f847f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 29 Nov 2024 13:32:51 +1000
Subject: [PATCH] feat(ui): format warnings tooltip

---
 invokeai/frontend/web/public/locales/en.json     |  3 ++-
 .../common/CanvasEntityHeaderWarnings.tsx        | 16 ++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index dfb75eb2a80..c8771a5c444 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -176,7 +176,8 @@
         "reset": "Reset",
         "none": "None",
         "new": "New",
-        "generating": "Generating"
+        "generating": "Generating",
+        "warnings": "Warnings"
     },
     "hrf": {
         "hrf": "High Resolution Fix",
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx
index c6ef5ad7db1..f13de15c19b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx
@@ -1,4 +1,4 @@
-import { IconButton, ListItem, UnorderedList } from '@invoke-ai/ui-library';
+import { Flex, IconButton, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -86,12 +86,16 @@ export const CanvasEntityHeaderWarnings = memo(() => {
 CanvasEntityHeaderWarnings.displayName = 'CanvasEntityHeaderWarnings';
 
 const TooltipContent = memo((props: { warnings: string[] }) => {
+  const { t } = useTranslation();
   return (
-    <UnorderedList>
-      {props.warnings.map((warning, index) => (
-        <ListItem key={index}>{warning}</ListItem>
-      ))}
-    </UnorderedList>
+    <Flex flexDir="column">
+      <Text>{t('common.warnings')}:</Text>
+      <UnorderedList>
+        {props.warnings.map((warning, index) => (
+          <ListItem key={index}>{warning}</ListItem>
+        ))}
+      </UnorderedList>
+    </Flex>
   );
 });
 TooltipContent.displayName = 'TooltipContent';