This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 5f01c77a6db Make zIndex of select to be greater than modal in
fullscreen mode to display options. (#48743)
5f01c77a6db is described below
commit 5f01c77a6db6dd37237cf1ca2a472c8d14fd977e
Author: Karthikeyan Singaravelan <[email protected]>
AuthorDate: Thu Apr 3 19:26:43 2025 +0530
Make zIndex of select to be greater than modal in fullscreen mode to
display options. (#48743)
---
.../airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git
a/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
b/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
index e3f5c44387b..85bfd771f74 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
@@ -32,6 +32,7 @@ import type { TaskInstanceResponse } from
"openapi/requests/types.gen";
import { TaskTrySelect } from "src/components/TaskTrySelect";
import { Button, Select } from "src/components/ui";
import { SearchParamsKeys } from "src/constants/searchParams";
+import { system } from "src/theme";
import { type LogLevel, logLevelColorMapping, logLevelOptions } from
"src/utils/logs";
type Props = {
@@ -60,6 +61,12 @@ export const TaskLogHeader = ({
const logLevels = searchParams.getAll(SearchParamsKeys.LOG_LEVEL);
const hasLogLevels = logLevels.length > 0;
+ // Have select zIndex greater than modal zIndex in fullscreen so that
+ // select options are displayed.
+ const zIndex = isFullscreen
+ ? Number(system.tokens.categoryMap.get("zIndex")?.get("modal")?.value ??
1400) + 1
+ : undefined;
+
const sourceOptionList = createListCollection<{
label: string;
value: string;
@@ -117,6 +124,7 @@ export const TaskLogHeader = ({
<Select.Root
collection={logLevelOptions}
maxW="250px"
+ minW={isFullscreen ? "150px" : undefined}
multiple
onValueChange={handleLevelChange}
value={hasLogLevels ? logLevels : ["all"]}
@@ -138,7 +146,7 @@ export const TaskLogHeader = ({
}
</Select.ValueText>
</Select.Trigger>
- <Select.Content>
+ <Select.Content zIndex={zIndex}>
{logLevelOptions.items.map((option) => (
<Select.Item item={option} key={option.label}>
{option.value === "all" ? (
