From 9f50dee72bbb96696bec7094f6ec9c7318d22071 Mon Sep 17 00:00:00 2001
From: typescreep <typescreep@prorobotech.ru>
Date: Tue, 5 Aug 2025 19:14:01 +0300
Subject: [PATCH] buttons alignment fix

---
 package-lock.json                             |  8 +--
 package.json                                  |  2 +-
 .../PaddingContainer/PaddingContainer.ts      |  9 +++
 .../atoms/PaddingContainer/index.ts           |  1 +
 src/components/atoms/index.ts                 |  1 +
 .../TableBuiltinInfo/TableBuiltinInfo.tsx     | 66 ++++++++---------
 .../molecules/ResourceInfo/ResourceInfo.tsx   | 70 ++++++++++---------
 .../TableNonCrdInfo/TableNonCrdInfo.tsx       | 70 ++++++++++---------
 src/constants/blocksSizes.ts                  |  2 +-
 9 files changed, 123 insertions(+), 106 deletions(-)
 create mode 100644 src/components/atoms/PaddingContainer/PaddingContainer.ts
 create mode 100644 src/components/atoms/PaddingContainer/index.ts

diff --git a/package-lock.json b/package-lock.json
index 9bf9ffe..8c12dcf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@ant-design/icons": "5.6.0",
         "@monaco-editor/react": "4.6.0",
         "@originjs/vite-plugin-federation": "1.3.6",
-        "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.82",
+        "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.83",
         "@readme/openapi-parser": "4.0.0",
         "@reduxjs/toolkit": "2.2.5",
         "@tanstack/react-query": "5.62.2",
@@ -2802,9 +2802,9 @@
       }
     },
     "node_modules/@prorobotech/openapi-k8s-toolkit": {
-      "version": "0.0.1-alpha.82",
-      "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.82.tgz",
-      "integrity": "sha512-x/MSSpud6mYYgCdoiPTNzaRvUvZVTtbecf6212s+QNov32UvaoewBfcVM7blvDSgq0jo59VLmaD3uJ7M8pE8HA==",
+      "version": "0.0.1-alpha.83",
+      "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.83.tgz",
+      "integrity": "sha512-5FXbKM+1jD30gxgu6xCMcvq00ZBZY2gnZEDjZ086EMepu6vgz4u9lo69uwQa76JndG78NFV0ceiOw+t6unazrQ==",
       "license": "MIT",
       "dependencies": {
         "@monaco-editor/react": "4.6.0",
diff --git a/package.json b/package.json
index d4f90ca..3d36b48 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@ant-design/icons": "5.6.0",
     "@monaco-editor/react": "4.6.0",
     "@originjs/vite-plugin-federation": "1.3.6",
-    "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.82",
+    "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.83",
     "@readme/openapi-parser": "4.0.0",
     "@reduxjs/toolkit": "2.2.5",
     "@tanstack/react-query": "5.62.2",
diff --git a/src/components/atoms/PaddingContainer/PaddingContainer.ts b/src/components/atoms/PaddingContainer/PaddingContainer.ts
new file mode 100644
index 0000000..850fbfd
--- /dev/null
+++ b/src/components/atoms/PaddingContainer/PaddingContainer.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+type TPaddingContainerProps = {
+  $padding: string
+}
+
+export const PaddingContainer = styled.div<TPaddingContainerProps>`
+  padding: ${({ $padding }) => $padding};
+`
diff --git a/src/components/atoms/PaddingContainer/index.ts b/src/components/atoms/PaddingContainer/index.ts
new file mode 100644
index 0000000..9e73e80
--- /dev/null
+++ b/src/components/atoms/PaddingContainer/index.ts
@@ -0,0 +1 @@
+export * from './PaddingContainer'
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index c74ce34..ba44548 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -14,3 +14,4 @@ export * from './NavigationContainer'
 export * from './EntrySelect'
 export * from './OverflowMaxHeightContainer'
 export * from './MarginTopContainer'
+export * from './PaddingContainer'
diff --git a/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx b/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx
index 4c9164b..54901a7 100644
--- a/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx
+++ b/src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx
@@ -12,7 +12,7 @@ import {
   checkIfBuiltInInstanceNamespaceScoped,
   useBuiltinResources,
 } from '@prorobotech/openapi-k8s-toolkit'
-import { FlexGrow, OverflowMaxHeightContainer } from 'components'
+import { FlexGrow, OverflowMaxHeightContainer, PaddingContainer } from 'components'
 import { TABLE_PROPS } from 'constants/tableProps'
 import {
   HEAD_FIRST_ROW,
@@ -193,38 +193,40 @@ export const TableBuiltinInfo: FC<TTableBuiltinInfoProps> = ({ namespace, typeNa
         )} */}
       </OverflowMaxHeightContainer>
       <FlexGrow />
-      <Flex justify="space-between">
-        <Button
-          type="primary"
-          onClick={() =>
-            navigate(
-              `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
-                params.syntheticProject ? `/${params.syntheticProject}` : ''
-              }/forms/builtin/v1/${typeName}?backlink=${baseprefix}${inside ? '/inside' : ''}/${cluster}${
-                namespace ? `/${namespace}` : ''
-              }${params.syntheticProject ? `/${params.syntheticProject}` : ''}/builtin-table/${typeName}`,
-            )
-          }
-          loading={isNamespaced ? false : createPermission.isPending}
-          disabled={isNamespaced ? false : !createPermission.data?.status.allowed}
-        >
-          <PlusOutlined />
-          Add
-        </Button>
+      <PaddingContainer $padding="4px">
+        <Flex justify="space-between">
+          <Button
+            type="primary"
+            onClick={() =>
+              navigate(
+                `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
+                  params.syntheticProject ? `/${params.syntheticProject}` : ''
+                }/forms/builtin/v1/${typeName}?backlink=${baseprefix}${inside ? '/inside' : ''}/${cluster}${
+                  namespace ? `/${namespace}` : ''
+                }${params.syntheticProject ? `/${params.syntheticProject}` : ''}/builtin-table/${typeName}`,
+              )
+            }
+            loading={isNamespaced ? false : createPermission.isPending}
+            disabled={isNamespaced ? false : !createPermission.data?.status.allowed}
+          >
+            <PlusOutlined />
+            Add
+          </Button>
 
-        {selectedRowKeys.length > 0 && (
-          <Flex gap={16}>
-            <Button type="primary" onClick={clearSelected}>
-              <ClearOutlined />
-              Clear
-            </Button>
-            <Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
-              <MinusOutlined />
-              Delete
-            </Button>
-          </Flex>
-        )}
-      </Flex>
+          {selectedRowKeys.length > 0 && (
+            <Flex gap={16}>
+              <Button type="primary" onClick={clearSelected}>
+                <ClearOutlined />
+                Clear
+              </Button>
+              <Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
+                <MinusOutlined />
+                Delete
+              </Button>
+            </Flex>
+          )}
+        </Flex>
+      </PaddingContainer>
       {isDeleteModalOpen && (
         <DeleteModal
           name={isDeleteModalOpen.name}
diff --git a/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx b/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx
index 5b56d7a..0e3bbe0 100644
--- a/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx
+++ b/src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx
@@ -11,7 +11,7 @@ import {
   TAdditionalPrinterColumns,
   useCrdResources,
 } from '@prorobotech/openapi-k8s-toolkit'
-import { FlexGrow, OverflowMaxHeightContainer } from 'components'
+import { FlexGrow, OverflowMaxHeightContainer, PaddingContainer } from 'components'
 import { TABLE_PROPS } from 'constants/tableProps'
 import {
   HEAD_FIRST_ROW,
@@ -192,39 +192,41 @@ export const ResourceInfo: FC<TResourceInfoProps> = ({
         )} */}
       </OverflowMaxHeightContainer>
       <FlexGrow />
-      <Flex justify="space-between">
-        <Button
-          type="primary"
-          onClick={() =>
-            navigate(
-              `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
-                params.syntheticProject ? `/${params.syntheticProject}` : ''
-              }/forms/crds/${apiGroup}/${apiVersion}/${crdPluralName}?backlink=${baseprefix}${
-                inside ? '/inside' : ''
-              }/${cluster}${namespace ? `/${namespace}` : ''}${
-                params.syntheticProject ? `/${params.syntheticProject}` : ''
-              }/crd-table/${apiGroup}/${apiVersion}/${apiExtensionVersion}/${crdName}`,
-            )
-          }
-          loading={permissions.canCreate === undefined}
-          disabled={permissions.canCreate === false}
-        >
-          <PlusOutlined />
-          Add
-        </Button>
-        {selectedRowKeys.length > 0 && (
-          <Flex gap={16}>
-            <Button type="primary" onClick={clearSelected}>
-              <ClearOutlined />
-              Clear
-            </Button>
-            <Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
-              <MinusOutlined />
-              Delete
-            </Button>
-          </Flex>
-        )}
-      </Flex>
+      <PaddingContainer $padding="4px">
+        <Flex justify="space-between">
+          <Button
+            type="primary"
+            onClick={() =>
+              navigate(
+                `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
+                  params.syntheticProject ? `/${params.syntheticProject}` : ''
+                }/forms/crds/${apiGroup}/${apiVersion}/${crdPluralName}?backlink=${baseprefix}${
+                  inside ? '/inside' : ''
+                }/${cluster}${namespace ? `/${namespace}` : ''}${
+                  params.syntheticProject ? `/${params.syntheticProject}` : ''
+                }/crd-table/${apiGroup}/${apiVersion}/${apiExtensionVersion}/${crdName}`,
+              )
+            }
+            loading={permissions.canCreate === undefined}
+            disabled={permissions.canCreate === false}
+          >
+            <PlusOutlined />
+            Add
+          </Button>
+          {selectedRowKeys.length > 0 && (
+            <Flex gap={16}>
+              <Button type="primary" onClick={clearSelected}>
+                <ClearOutlined />
+                Clear
+              </Button>
+              <Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
+                <MinusOutlined />
+                Delete
+              </Button>
+            </Flex>
+          )}
+        </Flex>
+      </PaddingContainer>
       {isDeleteModalOpen && (
         <DeleteModal
           name={isDeleteModalOpen.name}
diff --git a/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx b/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx
index 8a2e4c4..aebbdff 100644
--- a/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx
+++ b/src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx
@@ -13,7 +13,7 @@ import {
   checkIfApiInstanceNamespaceScoped,
   useApiResources,
 } from '@prorobotech/openapi-k8s-toolkit'
-import { FlexGrow, OverflowMaxHeightContainer } from 'components'
+import { FlexGrow, OverflowMaxHeightContainer, PaddingContainer } from 'components'
 import { TABLE_PROPS } from 'constants/tableProps'
 import {
   HEAD_FIRST_ROW,
@@ -207,39 +207,41 @@ export const TableNonCrdInfo: FC<TTableNonCrdInfoProps> = ({
         )} */}
       </OverflowMaxHeightContainer>
       <FlexGrow />
-      <Flex justify="space-between">
-        <Button
-          type="primary"
-          onClick={() =>
-            navigate(
-              `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
-                params.syntheticProject ? `/${params.syntheticProject}` : ''
-              }/forms/apis/${apiGroup}/${apiVersion}/${typeName}?backlink=${baseprefix}${
-                inside ? '/inside' : ''
-              }/${cluster}${namespace ? `/${namespace}` : ''}${
-                params.syntheticProject ? `/${params.syntheticProject}` : ''
-              }/api-table/${apiGroup}/${apiVersion}/${typeName}`,
-            )
-          }
-          loading={isNamespaced ? false : createPermission.isPending}
-          disabled={isNamespaced ? false : !createPermission.data?.status.allowed}
-        >
-          <PlusOutlined />
-          Add
-        </Button>
-        {selectedRowKeys.length > 0 && (
-          <Flex gap={16}>
-            <Button type="primary" onClick={clearSelected}>
-              <ClearOutlined />
-              Clear
-            </Button>
-            <Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
-              <MinusOutlined />
-              Delete
-            </Button>
-          </Flex>
-        )}
-      </Flex>
+      <PaddingContainer $padding="4px">
+        <Flex justify="space-between">
+          <Button
+            type="primary"
+            onClick={() =>
+              navigate(
+                `${baseprefix}${inside ? '/inside' : ''}/${cluster}${namespace ? `/${namespace}` : ''}${
+                  params.syntheticProject ? `/${params.syntheticProject}` : ''
+                }/forms/apis/${apiGroup}/${apiVersion}/${typeName}?backlink=${baseprefix}${
+                  inside ? '/inside' : ''
+                }/${cluster}${namespace ? `/${namespace}` : ''}${
+                  params.syntheticProject ? `/${params.syntheticProject}` : ''
+                }/api-table/${apiGroup}/${apiVersion}/${typeName}`,
+              )
+            }
+            loading={isNamespaced ? false : createPermission.isPending}
+            disabled={isNamespaced ? false : !createPermission.data?.status.allowed}
+          >
+            <PlusOutlined />
+            Add
+          </Button>
+          {selectedRowKeys.length > 0 && (
+            <Flex gap={16}>
+              <Button type="primary" onClick={clearSelected}>
+                <ClearOutlined />
+                Clear
+              </Button>
+              <Button type="primary" onClick={() => setIsDeleteModalManyOpen(selectedRowsData)}>
+                <MinusOutlined />
+                Delete
+              </Button>
+            </Flex>
+          )}
+        </Flex>
+      </PaddingContainer>
       {isDeleteModalOpen && (
         <DeleteModal
           name={isDeleteModalOpen.name}
diff --git a/src/constants/blocksSizes.ts b/src/constants/blocksSizes.ts
index b054988..8be2d5b 100644
--- a/src/constants/blocksSizes.ts
+++ b/src/constants/blocksSizes.ts
@@ -11,4 +11,4 @@ export const BREADCRUMBS_HEIGHT = 26
 export const CONTENT_CARD_PADDING = 25
 export const BLACKHOLE_FORM_VIEW_SWITCH_HEIGHT = 42
 export const BLACKHOLE_FORM_SUBMIT_ROW_HEIGHT = 48
-export const TABLE_ADD_BUTTON_HEIGHT = 35
+export const TABLE_ADD_BUTTON_HEIGHT = 35 + 8