From 28385d06d1fc01f5f7f267f6e4bc821643dc0092 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 6 Sep 2024 19:46:30 +1000
Subject: [PATCH] feat(ui): filter UI layout

---
 .../src/features/controlLayers/components/Filters/Filter.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx
index d6d9d75794..cc19d47691 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Flex, Heading } from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex, Heading, Spacer } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { FilterSettings } from 'features/controlLayers/components/Filters/FilterSettings';
 import { FilterTypeSelect } from 'features/controlLayers/components/Filters/FilterTypeSelect';
@@ -51,7 +51,7 @@ export const Filter = memo(() => {
       </Heading>
       <FilterTypeSelect filterType={config.type} onChange={onChangeFilterType} />
       <FilterSettings filterConfig={config} onChange={onChangeFilterConfig} />
-      <ButtonGroup isAttached={false} size="sm" alignSelf="self-end">
+      <ButtonGroup isAttached={false} size="sm" w="full">
         <Button
           variant="ghost"
           leftIcon={<PiShootingStarBold />}
@@ -61,6 +61,7 @@ export const Filter = memo(() => {
         >
           {t('controlLayers.filter.preview')}
         </Button>
+        <Spacer />
         <Button
           variant="ghost"
           leftIcon={<PiCheckBold />}