From 3469c7b30367ca494624e9136a37dbdf1a3813c0 Mon Sep 17 00:00:00 2001
From: Aditya Patel <imadityapatel01@gmail.com>
Date: Tue, 2 Jun 2026 11:34:19 -0400
Subject: [PATCH] Align flexible form fields in grid layout

---
 .../src/components/FlexibleForm/FieldRow.tsx  | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldRow.tsx b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldRow.tsx
index 4dc59a471e8f6..4d69063bc9e4f 100644
--- a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldRow.tsx
+++ b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldRow.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Field, Stack } from "@chakra-ui/react";
+import { Field, Grid, Stack } from "@chakra-ui/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -58,25 +58,25 @@ export const FieldRow = ({
   };
 
   return (
-    <Field.Root invalid={!isValid} orientation="horizontal" required={isRequired(param)}>
-      <Stack>
-        <Field.Label fontSize="md" style={{ flexBasis: "30%" }}>
+    <Field.Root invalid={!isValid} required={isRequired(param)}>
+      <Grid alignItems="start" gap={4} templateColumns={{ base: "1fr", md: "minmax(0, 30%) minmax(0, 70%)" }}>
+        <Field.Label fontSize="md" minWidth={0} overflowWrap="anywhere">
           {param.schema.title ?? name} <Field.RequiredIndicator />
         </Field.Label>
-      </Stack>
-      <Stack css={{ flexBasis: "70%" }}>
-        <FieldSelector name={name} namespace={namespace} onUpdate={onUpdate} />
-        {param.description === null ? (
-          param.schema.description_md === undefined ? undefined : (
-            <Field.HelperText>
-              <ReactMarkdown>{param.schema.description_md}</ReactMarkdown>
-            </Field.HelperText>
-          )
-        ) : (
-          <Field.HelperText>{param.description}</Field.HelperText>
-        )}
-        {isValid ? undefined : <Field.ErrorText>{String(error)}</Field.ErrorText>}
-      </Stack>
+        <Stack minWidth={0}>
+          <FieldSelector name={name} namespace={namespace} onUpdate={onUpdate} />
+          {param.description === null ? (
+            param.schema.description_md === undefined ? undefined : (
+              <Field.HelperText>
+                <ReactMarkdown>{param.schema.description_md}</ReactMarkdown>
+              </Field.HelperText>
+            )
+          ) : (
+            <Field.HelperText>{param.description}</Field.HelperText>
+          )}
+          {isValid ? undefined : <Field.ErrorText>{String(error)}</Field.ErrorText>}
+        </Stack>
+      </Grid>
     </Field.Root>
   );
 };