From 813cf87920e0295e06dcf0bf8a3d9e413e655cc7 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 26 Oct 2024 10:06:10 +1000
Subject: [PATCH] feat(ui): move canvas alerts to top-left corner

---
 .../CanvasAlerts/CanvasAlertsPreserveMask.tsx    |  2 +-
 .../CanvasAlertsSelectedEntityStatus.tsx         |  2 +-
 .../CanvasAlerts/CanvasAlertsSendingTo.tsx       |  1 -
 .../components/CanvasMainPanelContent.tsx        | 16 ++++++++++------
 .../components/ImageViewer/ImageViewer.tsx       |  2 +-
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask.tsx
index bdfeabd1c7..7178c3d123 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask.tsx
+++ b/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" w="fit-content" alignSelf="flex-end">
+    <Alert status="warning" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
       <AlertIcon />
       <AlertTitle>{t('controlLayers.settings.preserveMask.alert')}</AlertTitle>
     </Alert>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus.tsx
index 6ba087af8e..47bbf36ebd 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus.tsx
@@ -98,7 +98,7 @@ const CanvasAlertsSelectedEntityStatusContent = memo(({ entityIdentifier, adapte
   }
 
   return (
-    <Alert status={alert.status} borderRadius="base" fontSize="sm" shadow="md" w="fit-content" alignSelf="flex-end">
+    <Alert status={alert.status} borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
       <AlertIcon />
       <AlertTitle>{alert.title}</AlertTitle>
     </Alert>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx
index 16791ee7e6..96d388c70a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx
@@ -132,7 +132,6 @@ const AlertWrapper = ({
             fontSize="sm"
             shadow="md"
             w="fit-content"
-            alignSelf="flex-end"
           >
             <Flex w="full" alignItems="center">
               <AlertIcon />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
index 1e8dccfd39..b66c0d8367 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
@@ -71,12 +71,16 @@ export const CanvasMainPanelContent = memo(() => {
           >
             <InvokeCanvasComponent />
             <CanvasManagerProviderGate>
-              {showHUD && (
-                <Flex position="absolute" top={1} insetInlineStart={1} pointerEvents="none">
-                  <CanvasHUD />
-                </Flex>
-              )}
-              <Flex flexDir="column" position="absolute" top={1} insetInlineEnd={1} pointerEvents="none" gap={2}>
+              <Flex
+                position="absolute"
+                flexDir="column"
+                top={1}
+                insetInlineStart={1}
+                pointerEvents="none"
+                gap={2}
+                alignItems="flex-start"
+              >
+                {showHUD && <CanvasHUD />}
                 <CanvasAlertsSelectedEntityStatus />
                 <CanvasAlertsPreserveMask />
                 <CanvasAlertsSendingToGallery />
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
index 47c82ca3d7..30a1afb76b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
@@ -57,7 +57,7 @@ export const ImageViewer = memo(({ closeButton }: Props) => {
         {hasImageToCompare && <ImageComparison containerDims={containerDims} />}
       </Box>
       <ImageComparisonDroppable />
-      <Box position="absolute" top={14} insetInlineEnd={2}>
+      <Box position="absolute" top={14} insetInlineStart={2}>
         <CanvasAlertsSendingToCanvas />
       </Box>
     </Flex>