Fixed layout on create cloud storage page (#7985)

cvat-ai · Jun 5, 2024 · c66bbfc · c66bbfc
1 parent f531cbb
commit c66bbfc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/cvat-ui/src/components/create-cloud-storage-page/cloud-storage-form.tsx b/cvat-ui/src/components/create-cloud-storage-page/cloud-storage-form.tsx
@@ -325,8 +325,7 @@ export default function CreateCloudStorageForm(props: Props): JSX.Element {
     const credentialsBlok = (): JSX.Element | null => {
         const internalCommonProps = {
             ...commonProps,
-            labelCol: { span: 8, offset: 2 },
-            wrapperCol: { offset: 2 },
+            className: `${commonProps.className} cvat-cloud-storage-form-item-offset-2`,
         };
 
         if (providerType === ProviderType.AWS_S3_BUCKET && credentialsType === CredentialsType.KEY_SECRET_KEY_PAIR) {
@@ -491,9 +490,7 @@ export default function CreateCloudStorageForm(props: Props): JSX.Element {
 
     const awsS3Configuration = (): JSX.Element => {
         const internalCommonProps = {
-            ...commonProps,
-            labelCol: { offset: 1 },
-            wrapperCol: { offset: 1 },
+            className: `${commonProps.className} cvat-cloud-storage-form-item-offset-1`,
         };
 
         return (
@@ -539,9 +536,7 @@ export default function CreateCloudStorageForm(props: Props): JSX.Element {
 
     const azureBlobStorageConfiguration = (): JSX.Element => {
         const internalCommonProps = {
-            ...commonProps,
-            labelCol: { offset: 1 },
-            wrapperCol: { offset: 1 },
+            className: `${commonProps.className} cvat-cloud-storage-form-item-offset-1`,
         };
 
         return (
@@ -576,9 +571,7 @@ export default function CreateCloudStorageForm(props: Props): JSX.Element {
 
     const googleCloudStorageConfiguration = (): JSX.Element => {
         const internalCommonProps = {
-            ...commonProps,
-            labelCol: { span: 6, offset: 1 },
-            wrapperCol: { offset: 1 },
+            className: `${commonProps.className} cvat-cloud-storage-form-item-offset-1`,
         };
 
         return (

diff --git a/cvat-ui/src/components/create-cloud-storage-page/styles.scss b/cvat-ui/src/components/create-cloud-storage-page/styles.scss
@@ -29,6 +29,14 @@
         text-align: initial;
 
         .cvat-cloud-storage-form-item {
+            &.cvat-cloud-storage-form-item-offset-1 {
+                margin-left: $grid-unit-size * 4;
+            }
+
+            &.cvat-cloud-storage-form-item-offset-2 {
+                margin-left: $grid-unit-size * 8;
+            }
+
             justify-content: space-between;
 
             > div:first-child {