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/ui/components/VerticalNavBar.tsx

@@ -18,7 +18,7 @@ export const VerticalNavBar = memo(() => {
   const customNavComponent = useStore($customNavComponent);
 
   return (
-    <Flex flexDir="column" alignItems="center" pt={4} pb={2} gap={4}>
+    <Flex flexDir="column" alignItems="center" py={2} gap={4}>
       <InvokeAILogoComponent />
       <Flex gap={4} pt={6} h="full" flexDir="column">
         <TabMountGate tab="generation">