From d703d529bac404868c65711d7d7182743d39fccf Mon Sep 17 00:00:00 2001
From: Neville <nevillemathew2014@gmail.com>
Date: Tue, 27 Sep 2022 21:59:28 -0500
Subject: [PATCH 1/4] Add vertical alignment to ui.inline

---
 ui/src/form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/form.tsx b/ui/src/form.tsx
index 7c1e278101..e64eb734a8 100644
--- a/ui/src/form.tsx
+++ b/ui/src/form.tsx
@@ -240,7 +240,7 @@ export const
   XInline = ({ model: m }: { model: Inline }) => (
     <XComponents
       items={m.items}
-      alignment={m.justify || 'start'}
+      alignment={m.justify || 'center'}
       inset={m.inset}
     />
   )

From 48875ea1dc08f09c234d689becaccda670933bac Mon Sep 17 00:00:00 2001
From: Neville <nevillemathew2014@gmail.com>
Date: Tue, 27 Sep 2022 21:59:28 -0500
Subject: [PATCH 2/4] Add vertical alignment to ui.inline

---
 ui/src/form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/form.tsx b/ui/src/form.tsx
index 7c1e278101..e64eb734a8 100644
--- a/ui/src/form.tsx
+++ b/ui/src/form.tsx
@@ -240,7 +240,7 @@ export const
   XInline = ({ model: m }: { model: Inline }) => (
     <XComponents
       items={m.items}
-      alignment={m.justify || 'start'}
+      alignment={m.justify || 'center'}
       inset={m.inset}
     />
   )

From 470117341e04c753a2669f5f2660c6cb1002619f Mon Sep 17 00:00:00 2001
From: Neville <nevillemathew2014@gmail.com>
Date: Tue, 27 Sep 2022 21:59:28 -0500
Subject: [PATCH 3/4] Add vertical alignment to ui.inline

---
 ui/src/form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/form.tsx b/ui/src/form.tsx
index 7c1e278101..e64eb734a8 100644
--- a/ui/src/form.tsx
+++ b/ui/src/form.tsx
@@ -240,7 +240,7 @@ export const
   XInline = ({ model: m }: { model: Inline }) => (
     <XComponents
       items={m.items}
-      alignment={m.justify || 'start'}
+      alignment={m.justify || 'center'}
       inset={m.inset}
     />
   )

From 03a189ada46dcb9122f62afb8dfa1262b4a1d6ff Mon Sep 17 00:00:00 2001
From: Neville <nevillemathew2014@gmail.com>
Date: Thu, 29 Sep 2022 12:25:13 -0500
Subject: [PATCH 4/4] Updated changes for ui.inline

---
 ui/src/form.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/src/form.tsx b/ui/src/form.tsx
index e64eb734a8..ed8ddac082 100644
--- a/ui/src/form.tsx
+++ b/ui/src/form.tsx
@@ -173,6 +173,8 @@ interface Inline {
   justify?: 'start' | 'end' | 'center' | 'between' | 'around'
   /** Whether to display the components inset from the parent form, with a contrasting background. */
   inset?: B
+  /** Add align prop to Inline component for all flexbox properties */
+  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
 }
 
 /** Create a form. */
@@ -215,9 +217,10 @@ const
   })
 
 type XComponentAlignment = 'start' | 'end' | 'center' | 'between' | 'around'
+type YComponentAlignment = 'start' | 'end' | 'center' | 'baseline' | 'stretch'
 
 export const
-  XComponents = ({ items, alignment, inset }: { items: Component[], alignment?: XComponentAlignment, inset?: B }) => {
+  XComponents = ({ items, alignment, inset, align }: { items: Component[], alignment?: XComponentAlignment, inset?: B, align?: YComponentAlignment }) => {
     const
       components = items.map((m: any, i) => {
         const
@@ -235,13 +238,15 @@ export const
           </div>
         )
       })
-    return <div className={clas(alignment ? css.horizontal : css.vertical, inset ? css.inset : '')} style={{ justifyContent: justifications[alignment || ''] }}>{components}</div>
+      /** Add align prop to return statement */
+    return <div className={clas(alignment ? css.horizontal : css.vertical, inset ? css.inset : '', align ? css.align : '' )} style={{ justifyContent: justifications[alignment || ''] }}>{components}</div>
   },
   XInline = ({ model: m }: { model: Inline }) => (
     <XComponents
       items={m.items}
-      alignment={m.justify || 'center'}
+      alignment={m.justify || 'start'}
       inset={m.inset}
+      align={m.align}
     />
   )