This is an automated email from the ASF dual-hosted git repository.
rahulvats pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-1-test by this push:
new a971541b05f Variable table handle long words break when values are
expanded (#62416) (#62781)
a971541b05f is described below
commit a971541b05f01727862f693cb782a47fd411d346
Author: Pierre Jeambrun <[email protected]>
AuthorDate: Tue Mar 3 13:11:58 2026 +0100
Variable table handle long words break when values are expanded (#62416)
(#62781)
(cherry picked from commit 6d6f8bf3d04fc3ee90a3dfd6f5c1e980dabb549a)
---
.../airflow/ui/src/pages/Variables/Variables.tsx | 26 +++++++++++++---------
1 file changed, 15 insertions(+), 11 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
index fe4da5a688a..12741c9313d 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Flex, HStack, Spacer, VStack, useDisclosure } from "@chakra-ui/react";
+import { Box, Flex, HStack, Spacer, VStack, useDisclosure } from
"@chakra-ui/react";
import type { ColumnDef } from "@tanstack/react-table";
import type { TFunction } from "i18next";
import { useEffect, useMemo, useState } from "react";
@@ -90,22 +90,26 @@ const getColumns = ({
{
accessorKey: "value",
cell: ({ row }) => (
- <TrimText
- charLimit={open ? row.original.value.length : undefined}
- showTooltip
- text={row.original.value}
- />
+ <Box minWidth={0} overflowWrap="anywhere" wordBreak="break-word">
+ <TrimText
+ charLimit={open ? row.original.value.length : undefined}
+ showTooltip
+ text={row.original.value}
+ />
+ </Box>
),
header: translate("columns.value"),
},
{
accessorKey: "description",
cell: ({ row }) => (
- <TrimText
- charLimit={open ? row.original.description?.length : undefined}
- showTooltip
- text={row.original.description}
- />
+ <Box minWidth={0} overflowWrap="anywhere" wordBreak="break-word">
+ <TrimText
+ charLimit={open ? row.original.description?.length : undefined}
+ showTooltip
+ text={row.original.description}
+ />
+ </Box>
),
header: translate("columns.description"),
},
