feat(ui): fix queue item count badge positioning

Previously this badge, floating over the queue menu button next to the invoke button, was rendered within the existing layout. When I initially positioned it, the app layout interfered - it would extend into an area reserved for a flex gap, which cut off the badge.

As a (bad) workaround, I had shifted the whole app down a few pixels to make room for it. What I should have done is what I've done in this commit - render the badge in a portal to take it out of the layout so we don't need that extra vertical padding.

Sleekified some styling a bit too.

invokeai/frontend/web/src/features/controlLayers/components/ControlLayersEditor.tsx

@@ -19,8 +19,6 @@ export const CanvasEditor = memo(() => {
     <Flex
       tabIndex={-1}
       ref={ref}
-      layerStyle="first"
-      p={2}
       borderRadius="base"
       position="relative"
       flexDirection="column"

invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx

@@ -82,10 +82,11 @@ export const StageComponent = memo(({ asPreview = false }: Props) => {
   );
 
   return (
-    <Flex position="relative" w="full" h="full" bg={dynamicGrid ? 'base.850' : 'base.900'}>
+    <Flex position="relative" w="full" h="full" bg={dynamicGrid ? 'base.850' : 'base.900'} borderRadius="base">
       {!dynamicGrid && (
         <Flex
           position="absolute"
+          borderRadius="base"
           bgImage={TRANSPARENCY_CHECKER_PATTERN}
           top={0}
           right={0}
@@ -102,9 +103,6 @@ export const StageComponent = memo(({ asPreview = false }: Props) => {
         left={0}
         ref={containerRef}
         borderRadius="base"
-        border={1}
-        borderStyle="solid"
-        borderColor="base.700"
         overflow="hidden"
         data-testid="control-layers-canvas"
       />