From f4cdfa3b9ccc6eb11fe1c1bc872a11b97a84a14c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 29 Dec 2023 08:55:22 +1100
Subject: [PATCH] fix(ui): canvas layer select cut off

---
 .../IAICanvasToolbar/IAICanvasToolbar.tsx     | 30 +++++++------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
index 3f597235c4..9e279699eb 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -215,24 +215,16 @@ const IAICanvasToolbar = () => {
   );
 
   return (
-    <Flex
-      sx={{
-        alignItems: 'center',
-        gap: 2,
-        flexWrap: 'wrap',
-      }}
-    >
-      <Box w={24}>
-        <InvTooltip label={`${t('unifiedCanvas.layer')} (Q)`}>
-          <InvControl isDisabled={isStaging}>
-            <InvSelect
-              value={value}
-              options={LAYER_NAMES_DICT}
-              onChange={handleChangeLayer}
-            />
-          </InvControl>
-        </InvTooltip>
-      </Box>
+    <Flex alignItems="center" gap={2} flexWrap="wrap">
+      <InvTooltip label={`${t('unifiedCanvas.layer')} (Q)`}>
+        <InvControl isDisabled={isStaging} w="5rem">
+          <InvSelect
+            value={value}
+            options={LAYER_NAMES_DICT}
+            onChange={handleChangeLayer}
+          />
+        </InvControl>
+      </InvTooltip>
 
       <IAICanvasMaskOptions />
       <IAICanvasToolChooserOptions />