Increase max height for grid view elements

airflow/www/static/js/dag/details/Dag.tsx

@@ -36,7 +36,6 @@ import { getDuration, formatDuration } from 'src/datetime_utils';
 import { finalStatesMap, getMetaValue, getTaskSummary } from 'src/utils';
 import { useGridData } from 'src/api';
 import Time from 'src/components/Time';
-import useOffsetHeight from 'src/utils/useOffsetHeight';
 import type { TaskState } from 'src/types';
 
 import { SimpleStatus } from '../StatusBox';
@@ -46,7 +45,6 @@ const dagDetailsUrl = getMetaValue('dag_details_url');
 const Dag = () => {
   const { data: { dagRuns, groups } } = useGridData();
   const detailsRef = useRef<HTMLDivElement>(null);
-  const offsetHeight = useOffsetHeight(detailsRef);
 
   const taskSummary = getTaskSummary({ task: groups });
   const numMap = finalStatesMap();
@@ -95,7 +93,6 @@ const Dag = () => {
       </Button>
       <Box
         height="100%"
-        maxHeight={offsetHeight}
         ref={detailsRef}
         overflowY="auto"
       >

airflow/www/static/js/dag/details/dagRun/index.tsx

@@ -43,7 +43,6 @@ import { ClipboardText } from 'src/components/Clipboard';
 import { formatDuration, getDuration } from 'src/datetime_utils';
 import Time from 'src/components/Time';
 import RunTypeIcon from 'src/components/RunTypeIcon';
-import useOffsetHeight from 'src/utils/useOffsetHeight';
 
 import URLSearchParamsWrapper from 'src/utils/URLSearchParamWrapper';
 import NotesAccordion from 'src/dag/details/NotesAccordion';
@@ -64,7 +63,6 @@ interface Props {
 const DagRun = ({ runId }: Props) => {
   const { data: { dagRuns } } = useGridData();
   const detailsRef = useRef<HTMLDivElement>(null);
-  const offsetHeight = useOffsetHeight(detailsRef);
   const run = dagRuns.find((dr) => dr.runId === runId);
   const { onCopy, hasCopied } = useClipboard(run?.conf || '');
   if (!run) return null;
@@ -108,7 +106,6 @@ const DagRun = ({ runId }: Props) => {
       </Box>
       <Box
         height="100%"
-        maxHeight={offsetHeight}
         ref={detailsRef}
         overflowY="auto"
         pb={4}

airflow/www/static/js/dag/details/taskInstance/Logs/LogBlock.tsx

@@ -40,7 +40,7 @@ const LogBlock = ({
   const [autoScroll, setAutoScroll] = useState(true);
   const logBoxRef = useRef<HTMLPreElement>(null);
 
-  const maxHeight = useOffsetHeight(logBoxRef, parsedLogs);
+  const maxHeight = useOffsetHeight(logBoxRef, parsedLogs, 500);
 
   const codeBlockBottomDiv = useRef<HTMLDivElement>(null);
 

airflow/www/static/js/dag/details/taskInstance/index.tsx

@@ -32,7 +32,6 @@ import {
 
 import { useGridData, useTaskInstance } from 'src/api';
 import { getMetaValue, getTask } from 'src/utils';
-import useOffsetHeight from 'src/utils/useOffsetHeight';
 import type { DagRun, TaskInstance as TaskInstanceType } from 'src/types';
 import type { SelectionProps } from 'src/dag/useSelection';
 import NotesAccordion from 'src/dag/details/NotesAccordion';
@@ -63,8 +62,6 @@ const TaskInstance = ({
   const actionsMapIndexes = isMapIndexDefined ? [mapIndex] : [];
   const { data: { dagRuns, groups } } = useGridData();
   const detailsRef = useRef<HTMLDivElement>(null);
-  const offsetHeight = useOffsetHeight(detailsRef);
-
   const storageTabIndex = parseInt(localStorage.getItem(detailsPanelActiveTabIndex) || '0', 10);
   const [preferedTabIndex, setPreferedTabIndex] = useState(storageTabIndex);
 
@@ -161,7 +158,6 @@ const TaskInstance = ({
           <TabPanel
             pt={isMapIndexDefined ? '0px' : undefined}
             height="100%"
-            maxHeight={offsetHeight}
             ref={detailsRef}
             overflowY="auto"
             py="4px"

airflow/www/static/js/dag/grid/index.tsx

@@ -56,7 +56,7 @@ const Grid = ({
 }: Props) => {
   const scrollRef = useRef<HTMLDivElement>(null);
   const tableRef = useRef<HTMLTableSectionElement>(null);
-  const offsetHeight = useOffsetHeight(scrollRef);
+  const offsetHeight = useOffsetHeight(scrollRef, undefined, 750);
 
   const { data: { groups, dagRuns } } = useGridData();
   const dagRunIds = dagRuns.map((dr) => dr.runId);

airflow/www/static/js/utils/useOffsetHeight.tsx

@@ -36,7 +36,7 @@ const useOffsetHeight = (
     const calculateHeight = debounce(() => {
       if (contentRef.current) {
         const topOffset = contentRef.current.offsetTop;
-        const newHeight = window.innerHeight - (topOffset + footerHeight);
+        const newHeight = (window.innerHeight - (topOffset + footerHeight)) * 2;
         setHeight(newHeight > minHeight ? newHeight : minHeight);
       }
     }, 25);