fix(ui): alert layouts

invokeai/frontend/web/public/locales/en.json

@@ -1923,15 +1923,12 @@
             "scaledBbox": "Scaled Bbox",
             "autoSave": "Auto Save",
             "entityStatus": {
-                "selectedEntity": "Selected Entity",
-                "selectedEntityIs": "Selected Entity is",
-                "isFiltering": "is filtering",
-                "isTransforming": "is transforming",
-                "isLocked": "is locked",
-                "isHidden": "is hidden",
-                "isDisabled": "is disabled",
-                "isEmpty": "is empty",
-                "enabled": "Enabled"
+                "isFiltering": "{{title}} is filtering",
+                "isTransforming": "{{title}} is transforming",
+                "isLocked": "{{title}} is locked",
+                "isHidden": "{{title}} is hidden",
+                "isDisabled": "{{title}} is disabled",
+                "isEmpty": "{{title}} is empty"
             }
         }
     },

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask.tsx

@@ -13,7 +13,7 @@ export const CanvasAlertsPreserveMask = memo(() => {
   }
 
   return (
-    <Alert status="warning" borderRadius="base" fontSize="sm" shadow="md">
+    <Alert status="warning" borderRadius="base" fontSize="sm" shadow="md" w="fit-content" alignSelf="flex-end">
       <AlertIcon />
       <AlertTitle>{t('controlLayers.settings.preserveMask.alert')}</AlertTitle>
     </Alert>

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus.tsx

@@ -1,5 +1,5 @@
 import type { AlertStatus } from '@invoke-ai/ui-library';
-import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
+import { Alert, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -27,7 +27,6 @@ const $isFilteringFallback = atom(false);
 type AlertData = {
   status: AlertStatus;
   title: string;
-  description: string;
 };
 
 const CanvasAlertsSelectedEntityStatusContent = memo(({ entityIdentifier, adapter }: ContentProps) => {
@@ -52,48 +51,42 @@ const CanvasAlertsSelectedEntityStatusContent = memo(({ entityIdentifier, adapte
     if (isFiltering) {
       return {
         status: 'info',
-        title,
-        description: t('controlLayers.HUD.entityStatus.isFiltering'),
+        title: t('controlLayers.HUD.entityStatus.isFiltering', { title }),
       };
     }
 
     if (isTransforming) {
       return {
         status: 'info',
-        title,
-        description: t('controlLayers.HUD.entityStatus.isTransforming'),
+        title: t('controlLayers.HUD.entityStatus.isTransforming', { title }),
       };
     }
 
     if (isEmpty) {
       return {
         status: 'info',
-        title,
-        description: t('controlLayers.HUD.entityStatus.isEmpty'),
+        title: t('controlLayers.HUD.entityStatus.isEmpty', { title }),
       };
     }
 
     if (isHidden) {
       return {
         status: 'warning',
-        title,
-        description: t('controlLayers.HUD.entityStatus.isHidden'),
+        title: t('controlLayers.HUD.entityStatus.isHidden', { title }),
       };
     }
 
     if (isLocked) {
       return {
         status: 'warning',
-        title,
-        description: t('controlLayers.HUD.entityStatus.isLocked'),
+        title: t('controlLayers.HUD.entityStatus.isLocked', { title }),
       };
     }
 
     if (!isEnabled) {
       return {
         status: 'warning',
-        title,
-        description: t('controlLayers.HUD.entityStatus.isDisabled'),
+        title: t('controlLayers.HUD.entityStatus.isDisabled', { title }),
       };
     }
 
@@ -105,10 +98,9 @@ const CanvasAlertsSelectedEntityStatusContent = memo(({ entityIdentifier, adapte
   }
 
   return (
-    <Alert status={alert.status} borderRadius="base" fontSize="sm" shadow="md">
+    <Alert status={alert.status} borderRadius="base" fontSize="sm" shadow="md" w="fit-content" alignSelf="flex-end">
       <AlertIcon />
       <AlertTitle>{alert.title}</AlertTitle>
-      <AlertDescription>{alert.description}</AlertDescription>
     </Alert>
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx

@@ -136,7 +136,16 @@ const AlertWrapper = ({
           onMouseEnter={isHovered.setTrue}
           onMouseLeave={isHovered.setFalse}
         >
-          <Alert status="warning" flexDir="column" pointerEvents="auto" borderRadius="base" fontSize="sm" shadow="md">
+          <Alert
+            status="warning"
+            flexDir="column"
+            pointerEvents="auto"
+            borderRadius="base"
+            fontSize="sm"
+            shadow="md"
+            w="fit-content"
+            alignSelf="flex-end"
+          >
             <Flex w="full" alignItems="center">
               <AlertIcon />
               <AlertTitle>{title}</AlertTitle>