From e81dde0933f9280cf0bc82259e3c0e1041eb7401 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 6 Jun 2025 20:09:23 +1000
Subject: [PATCH] feat(ui): fiddle w/ staging area header

---
 .../components/SimpleSession/StagingAreaHeader.tsx       | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx
index 4e265a5e18..82bc9c9009 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable i18next/no-literal-string */
-import { Button, Flex, FormControl, FormLabel, Spacer, Switch, Text } from '@invoke-ai/ui-library';
+import { Button, Divider, Flex, FormControl, FormLabel, Spacer, Switch, Text } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
@@ -24,16 +24,17 @@ export const StagingAreaHeader = memo(() => {
   );
 
   return (
-    <Flex gap={2} w="full" alignItems="center">
+    <Flex gap={4} w="full" alignItems="center" px={2}>
       <Text fontSize="lg" fontWeight="bold">
-        Generations
+        Staging Area
       </Text>
       <Spacer />
       <FormControl w="min-content">
         <FormLabel m={0}>Auto-switch</FormLabel>
         <Switch size="sm" isChecked={autoSwitch} onChange={onChangeAutoSwitch} />
       </FormControl>
-      <Button size="sm" variant="ghost" onClick={startOver}>
+      <Divider orientation="vertical" />
+      <Button size="sm" variant="link" onClick={startOver}>
         Start Over
       </Button>
     </Flex>