From e2cbe43a2b274a2ca4c1dc0cdb95c2d69a488c21 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Wed, 2 Oct 2024 21:54:10 +0200
Subject: [PATCH] fix: form element alignment in form

---
 .../app-settings/panel/project-panel/ProjectCreateForm.tsx   | 4 ++--
 .../app-settings/panel/project-panel/ProjectMergeForm.tsx    | 5 +++--
 .../panel/project-panel/ProjectPanel.module.scss             | 4 +++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
index 466956177..059d2cea4 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
@@ -78,7 +78,7 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
         </div>
       </Panel.Title>
       {error && <Panel.Error>{error}</Panel.Error>}
-      <div className={style.innerColumn}>
+      <Panel.Section className={style.innerColumn}>
         <label>
           Project title
           <Input
@@ -145,7 +145,7 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
             {...register('backstageUrl')}
           />
         </label>
-      </div>
+      </Panel.Section>
     </Panel.Section>
   );
 }
diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx
index a3fafb9d8..72c976acd 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx
@@ -6,6 +6,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { PROJECT_DATA } from '../../../../common/api/constants';
 import { getDb, patchData } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
+import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../PanelUtils';
 
 import { makeProjectPatch } from './project.utils';
@@ -92,7 +93,7 @@ export default function ProjectMergeForm(props: ProjectMergeFromProps) {
         </div>
       </Panel.Title>
       {error && <Panel.Error>{error}</Panel.Error>}
-      <div className={style.innerColumn}>
+      <Panel.Section className={cx([style.innerColumn, style.inlineLabels])}>
         <Panel.Description>
           Select partial data from {`"${fileName}"`} to merge into the current project.
           <br /> This process is irreversible.
@@ -121,7 +122,7 @@ export default function ProjectMergeForm(props: ProjectMergeFromProps) {
           <Switch variant='ontime' {...register('http')} />
           HTTP Integration
         </label>
-      </div>
+      </Panel.Section>
     </Panel.Section>
   );
 }
diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss b/apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss
index e1947a3cb..08689c91c 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss
@@ -53,9 +53,11 @@
   display: flex;
   flex-direction: column;
   gap: 1em;
+}
 
+.inlineLabels {
   label {
     display: flex;
-    gap: 1em;
+    gap: 1rem;
   }
 }