fix layout

apps/web/Components/Admin/Cache/index.tsx

@@ -1,9 +1,10 @@
 import Background from '../../Layout/Background';
 import { useFilteredQueries } from './lib/hooks';
 import { QueryList } from './QueryList';
+import { reset } from '@/api/cache/query';
 import { min } from '@/styles/mq';
 import styled from 'styled-components';
-import { Collapse, Divider, Input } from 'ui/elements';
+import { Button, Collapse, Divider, Input } from 'ui/elements';
 
 const Wrapper = styled(Background)`
   padding: 4px 6px;
@@ -21,13 +22,21 @@ const Wrapper = styled(Background)`
 
 const Flex = styled.div`
   display: flex;
-  margin-bottom: 16px;
+  flex-direction: column;
-  justify-content: space-between;
   gap: 10px;
 `;
 
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
 export function Cache() {
-  const { filteredQueries, setFilterString } = useFilteredQueries();
+  const { filteredQueries, refetch, setFilterString } = useFilteredQueries();
+
+  function handleDeleteQuery() {
+    return reset().then(() => refetch());
+  }
 
   if (!filteredQueries) {
     return <div>Загрузка...</div>;
@@ -42,7 +51,6 @@ export function Cache() {
           allowClear
           onChange={(e) => setFilterString(e.target.value)}
         />
-      </Flex>
         <Collapse
           accordion
           items={Object.keys(filteredQueries).map((queryGroupName) => ({
@@ -51,6 +59,12 @@ export function Cache() {
             label: queryGroupName,
           }))}
         />
+        <ButtonWrapper>
+          <Button type="primary" danger disabled={false} onClick={() => handleDeleteQuery()}>
+            Очистить кэш
+          </Button>
+        </ButtonWrapper>
+      </Flex>
     </Wrapper>
   );
 }