Fix Logs tab scroll view

airflow/www/static/js/dag/Main.tsx

@@ -190,9 +190,15 @@ const Main = () => {
       height={`${mainHeight}px`}
       overflow="hidden"
       position="relative"
-      minHeight="750px"
+      display="flex"
+      flexDirection="column"
     >
-      <Accordion allowToggle index={accordionIndexes} borderTopWidth={0}>
+      <Accordion
+        allowToggle
+        index={accordionIndexes}
+        borderTopWidth={0}
+        flexShrink={0}
+      >
         <AccordionItem
           sx={{
             // Override chakra-collapse so our dropdowns still work
@@ -211,7 +217,7 @@ const Main = () => {
           </AccordionPanel>
         </AccordionItem>
       </Accordion>
-      <Flex height="100%">
+      <Flex flex={1} minHeight={0}>
         {isLoading || isEmpty(groups) ? (
           <Spinner />
         ) : (

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

@@ -19,7 +19,7 @@
 
 /* global moment */
 
-import React, { useMemo, useRef, useState } from "react";
+import React, { useMemo, useState } from "react";
 import {
   Box,
   Flex,
@@ -43,7 +43,7 @@ import {
 } from "chakra-react-select";
 
 import { useEventLogs } from "src/api";
-import { getMetaValue, useContentHeight } from "src/utils";
+import { getMetaValue } from "src/utils";
 import type { DagRun } from "src/types";
 import LinkButton from "src/components/LinkButton";
 import type { EventLog as EventLogType } from "src/types/api-generated";
@@ -74,8 +74,6 @@ const dagId = getMetaValue("dag_id") || undefined;
 const columnHelper = createColumnHelper<EventLogType>();
 
 const EventLog = ({ taskId, run, showMapped }: Props) => {
-  const logRef = useRef<HTMLDivElement>(null);
-  const contentHeight = useContentHeight(logRef);
   const { tableURLState, setTableURLState } = useTableURLState({
     sorting: [{ id: "when", desc: true }],
   });
@@ -214,12 +212,7 @@ const EventLog = ({ taskId, run, showMapped }: Props) => {
   });
 
   return (
-    <Box
-      height="100%"
-      maxHeight={`${contentHeight}px`}
-      ref={logRef}
-      overflowY="auto"
-    >
+    <Box flex={1} minHeight={0} overflowY="auto">
       <Flex justifyContent="right" mb={2}>
         <IconButton
           aria-label="Refresh"

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

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useRef, ReactNode } from "react";
+import React, { ReactNode } from "react";
 import {
   Table,
   Tbody,
@@ -41,7 +41,6 @@ import {
   getMetaValue,
   getTaskSummary,
   toSentenceCase,
-  useContentHeight,
 } from "src/utils";
 import { useGridData, useDagDetails } from "src/api";
 import Time from "src/components/Time";
@@ -60,8 +59,6 @@ const Dag = () => {
   const {
     data: { dagRuns, groups },
   } = useGridData();
-  const detailsRef = useRef<HTMLDivElement>(null);
-  const contentHeight = useContentHeight(detailsRef);
 
   const { data: dagDetailsData, isLoading: isLoadingDagDetails } =
     useDagDetails();
@@ -158,12 +155,7 @@ const Dag = () => {
   );
 
   return (
-    <Box
-      height="100%"
-      maxHeight={`${contentHeight}px`}
-      ref={detailsRef}
-      overflowY="auto"
-    >
+    <Box flex={1} minHeight={0} overflowY="auto">
       <Table variant="striped">
         <Tbody>
           {durations.length > 0 && (

airflow/www/static/js/dag/details/dagCode/CodeBlock.tsx

@@ -37,7 +37,8 @@ export default function CodeBlock({ code }: Props) {
 
   return (
     <Box
-      height="calc(100% - 10px)"
+      flex={1}
+      minHeight={0}
       borderWidth={2}
       borderColor="gray:100"
       position="relative"

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

@@ -17,19 +17,16 @@
  * under the License.
  */
 
-import React, { useRef } from "react";
+import React from "react";
 import { Box, Heading, Spinner } from "@chakra-ui/react";
 
-import { useContentHeight } from "src/utils";
 import Time from "src/components/Time";
 import { useDag, useDagCode } from "src/api";
 import ErrorAlert from "src/components/ErrorAlert";
 
 import CodeBlock from "./CodeBlock";
 
 const DagCode = () => {
-  const dagCodeRef = useRef<HTMLDivElement>(null);
-  const contentHeight = useContentHeight(dagCodeRef);
   const { data: dagData, isLoading: isLoadingDag, error: dagError } = useDag();
   const {
     data: codeSource = "",
@@ -41,9 +38,15 @@ const DagCode = () => {
   const error = codeError || dagError;
 
   return (
-    <Box ref={dagCodeRef} height={`${contentHeight}px`}>
+    <Box flex={1} minHeight={0} display="flex" flexDirection="column">
       {dagData?.lastParsedTime && (
-        <Heading as="h4" size="md" paddingBottom="10px" fontSize="14px">
+        <Heading
+          as="h4"
+          size="md"
+          paddingBottom="10px"
+          fontSize="14px"
+          flexShrink={0}
+        >
           Parsed at: <Time dateTime={dagData.lastParsedTime} />
         </Heading>
       )}

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

@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useRef } from "react";
+import React from "react";
 import { Box } from "@chakra-ui/react";
 
 import { useGridData } from "src/api";
-import { getMetaValue, useContentHeight } from "src/utils";
+import { getMetaValue } from "src/utils";
 import type { DagRun as DagRunType } from "src/types";
 import NotesAccordion from "src/dag/details/NotesAccordion";
 
@@ -37,21 +37,14 @@ const DagRun = ({ runId }: Props) => {
   const {
     data: { dagRuns },
   } = useGridData();
-  const detailsRef = useRef<HTMLDivElement>(null);
-  const contentHeight = useContentHeight(detailsRef);
 
   const run = dagRuns.find((dr) => dr.runId === runId);
 
   if (!run) return null;
   const { runType, note } = run;
 
   return (
-    <Box
-      maxHeight={`${contentHeight}px`}
-      ref={detailsRef}
-      overflowY="auto"
-      pb={4}
-    >
+    <Box flex={1} minHeight={0} overflowY="auto" pb={4}>
       <NotesAccordion
         dagId={dagId}
         runId={runId}

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

@@ -154,7 +154,13 @@ const Gantt = ({
   const intervals = runDuration / numBars;
 
   return (
-    <Box ref={ganttRef} position="relative" height="100%" overflow="hidden">
+    <Box
+      ref={ganttRef}
+      position="relative"
+      flex={1}
+      minHeight={0}
+      overflow="hidden"
+    >
       {!runId && (
         <Alert status="warning" position="absolute" top={2}>
           <AlertIcon />

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

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useRef, useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Box, useTheme, Select, Text, Switch, Flex } from "@chakra-ui/react";
 import ReactFlow, {
   ReactFlowProvider,
@@ -39,7 +39,7 @@ import {
   useUpstreamDatasetEvents,
 } from "src/api";
 import useSelection from "src/dag/useSelection";
-import { getMetaValue, getTask, useContentHeight } from "src/utils";
+import { getMetaValue, getTask } from "src/utils";
 import { useGraphLayout } from "src/utils/graph";
 import Edge from "src/components/Graph/Edge";
 import type { DepNode, WebserverEdge } from "src/types";
@@ -132,7 +132,6 @@ const getUpstreamDatasets = (
 };
 
 const Graph = ({ openGroupIds, onToggleGroups, hoveredTaskState }: Props) => {
-  const graphRef = useRef(null);
   const { data } = useGraphData();
   const [arrange, setArrange] = useState(data?.arrange || "LR");
   const [hasRendered, setHasRendered] = useState(false);
@@ -244,7 +243,6 @@ const Graph = ({ openGroupIds, onToggleGroups, hoveredTaskState }: Props) => {
   const { colors } = useTheme();
   const { getZoom, fitView } = useReactFlow();
   const latestDagRunId = dagRuns[dagRuns.length - 1]?.runId;
-  const contentHeight = useContentHeight(graphRef);
 
   useOnViewportChange({
     onEnd: (viewport: Viewport) => {
@@ -310,68 +308,61 @@ const Graph = ({ openGroupIds, onToggleGroups, hoveredTaskState }: Props) => {
   });
 
   return (
-    <Box
-      ref={graphRef}
-      height={`${contentHeight}px`}
-      borderWidth={1}
-      borderColor="gray.200"
-    >
-      {!!contentHeight && (
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          nodesDraggable={false}
-          nodeTypes={nodeTypes}
-          edgeTypes={edgeTypes}
-          minZoom={0.25}
-          maxZoom={1}
-          onlyRenderVisibleElements
-          defaultEdgeOptions={{ zIndex: 1 }}
-          // Fit view to selected task or the whole graph on render
-          fitView
-          fitViewOptions={{
-            nodes: selected.taskId ? [{ id: selected.taskId }] : undefined,
-          }}
-        >
-          <Panel position="top-right">
-            <Box bg={colors.whiteAlpha[800]} p={1}>
-              {!!datasetsCollection?.datasets?.length && (
-                <Flex display="flex" alignItems="center">
-                  <Text fontSize="sm" mr={1}>
-                    Show datasets:
-                  </Text>
-                  <Switch
-                    id="show-datasets"
-                    isChecked={showDatasets}
-                    onChange={() => setShowDatasets(!showDatasets)}
-                  />
-                </Flex>
-              )}
-              <Text fontSize="sm">Layout:</Text>
-              <Select
-                value={arrange}
-                onChange={(e) => setArrange(e.target.value)}
-                fontSize="sm"
-                size="sm"
-              >
-                <option value="LR">Left -&gt; Right</option>
-                <option value="RL">Right -&gt; Left</option>
-                <option value="TB">Top -&gt; Bottom</option>
-                <option value="BT">Bottom -&gt; Top</option>
-              </Select>
-            </Box>
-          </Panel>
-          <Background />
-          <Controls showInteractive={false} />
-          <MiniMap
-            nodeStrokeWidth={15}
-            nodeStrokeColor={(props) => nodeStrokeColor(props, colors)}
-            nodeColor={nodeColor}
-            zoomable
-            pannable
-          />
-        </ReactFlow>
-      )}
+    <Box flex={1} minHeight={0} borderWidth={1} borderColor="gray.200">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodesDraggable={false}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        minZoom={0.25}
+        maxZoom={1}
+        onlyRenderVisibleElements
+        defaultEdgeOptions={{ zIndex: 1 }}
+        // Fit view to selected task or the whole graph on render
+        fitView
+        fitViewOptions={{
+          nodes: selected.taskId ? [{ id: selected.taskId }] : undefined,
+        }}
+      >
+        <Panel position="top-right">
+          <Box bg={colors.whiteAlpha[800]} p={1}>
+            {!!datasetsCollection?.datasets?.length && (
+              <Flex display="flex" alignItems="center">
+                <Text fontSize="sm" mr={1}>
+                  Show datasets:
+                </Text>
+                <Switch
+                  id="show-datasets"
+                  isChecked={showDatasets}
+                  onChange={() => setShowDatasets(!showDatasets)}
+                />
+              </Flex>
+            )}
+            <Text fontSize="sm">Layout:</Text>
+            <Select
+              value={arrange}
+              onChange={(e) => setArrange(e.target.value)}
+              fontSize="sm"
+              size="sm"
+            >
+              <option value="LR">Left -&gt; Right</option>
+              <option value="RL">Right -&gt; Left</option>
+              <option value="TB">Top -&gt; Bottom</option>
+              <option value="BT">Bottom -&gt; Top</option>
+            </Select>
+          </Box>
+        </Panel>
+        <Background />
+        <Controls showInteractive={false} />
+        <MiniMap
+          nodeStrokeWidth={15}
+          nodeStrokeColor={(props) => nodeStrokeColor(props, colors)}
+          nodeColor={nodeColor}
+          zoomable
+          pannable
+        />
+      </ReactFlow>
     </Box>
   );
 };