diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss
index 3e4dd89d26..60c55f9db1 100644
--- a/frontend/src/app/App.scss
+++ b/frontend/src/app/App.scss
@@ -41,12 +41,6 @@ body,
       inset-inline-start: 12px;
     }
   }
-  .pf-topology-container {
-    overflow-y: hidden;
-    .pf-v5-c-drawer__panel.pf-m-resizable {
-      min-width: 350px;
-    }
-  }
 }
 
 // specificity targeting form elements to override --pf-v5-global--FontSize--md
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
index e863ba7942..c4f7e10fcf 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
@@ -163,86 +163,81 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
           style={{ flexBasis: 0, overflowY: 'hidden' }}
           variant="light"
         >
-          <Flex
-            direction={{ default: 'column' }}
+          <Tabs
+            activeKey={activeTabKey}
+            onSelect={(e, tabIndex) => {
+              setActiveTabKey(tabIndex);
+              setSelectedId(null);
+            }}
+            aria-label="Pipeline Details tabs"
+            role="region"
+          >
+            <Tab
+              eventKey={PipelineDetailsTab.GRAPH}
+              title={<TabTitleText>Graph</TabTitleText>}
+              aria-label="Pipeline Graph Tab"
+              tabContentId={`tabContent-${PipelineDetailsTab.GRAPH}`}
+            />
+            <Tab
+              eventKey={PipelineDetailsTab.SUMMARY}
+              title={<TabTitleText>Summary</TabTitleText>}
+              aria-label="Pipeline Summary Tab"
+            >
+              <TabContentBody hasPadding>
+                <PipelineSummaryDescriptionList pipeline={pipeline} version={pipelineVersion} />
+              </TabContentBody>
+            </Tab>
+            <Tab
+              eventKey={PipelineDetailsTab.YAML}
+              title={<TabTitleText>Pipeline spec</TabTitleText>}
+              data-testid="pipeline-yaml-tab"
+              aria-label="Pipeline YAML Tab"
+              tabContentId={`tabContent-${PipelineDetailsTab.YAML}`}
+            />
+          </Tabs>
+          <TabContent
+            id={`tabContent-${PipelineDetailsTab.GRAPH}`}
+            eventKey={PipelineDetailsTab.GRAPH}
+            activeKey={activeTabKey}
+            hidden={PipelineDetailsTab.GRAPH !== activeTabKey}
             style={{ height: '100%' }}
-            spaceItems={{ default: 'spaceItemsNone' }}
+            data-testid="pipeline-version-topology-content"
           >
-            <FlexItem>
-              <Tabs
-                activeKey={activeTabKey}
-                onSelect={(e, tabIndex) => {
-                  setActiveTabKey(tabIndex);
-                  setSelectedId(null);
+            {nodes.length === 0 ? (
+              <PipelineTopologyEmpty />
+            ) : (
+              <PipelineTopology
+                nodes={nodes}
+                selectedIds={selectedId ? [selectedId] : []}
+                onSelectionChange={(ids) => {
+                  setSelectedId(ids.length ? ids[0] : null);
                 }}
-                aria-label="Pipeline Details tabs"
-                role="region"
-              >
-                <Tab
-                  eventKey={PipelineDetailsTab.GRAPH}
-                  title={<TabTitleText>Graph</TabTitleText>}
-                  aria-label="Pipeline Graph Tab"
-                  tabContentId={`tabContent-${PipelineDetailsTab.GRAPH}`}
-                />
-                <Tab
-                  eventKey={PipelineDetailsTab.SUMMARY}
-                  title={<TabTitleText>Summary</TabTitleText>}
-                  aria-label="Pipeline Summary Tab"
-                >
-                  <TabContentBody hasPadding>
-                    <PipelineSummaryDescriptionList pipeline={pipeline} version={pipelineVersion} />
-                  </TabContentBody>
-                </Tab>
-                <Tab
-                  eventKey={PipelineDetailsTab.YAML}
-                  title={<TabTitleText>Pipeline spec</TabTitleText>}
-                  data-testid="pipeline-yaml-tab"
-                  aria-label="Pipeline YAML Tab"
-                  tabContentId={`tabContent-${PipelineDetailsTab.YAML}`}
-                />
-              </Tabs>
-            </FlexItem>
-            <FlexItem flex={{ default: 'flex_1' }} style={{ overflowY: 'hidden' }}>
-              <TabContent
-                id={`tabContent-${PipelineDetailsTab.GRAPH}`}
-                eventKey={PipelineDetailsTab.GRAPH}
-                activeKey={activeTabKey}
-                hidden={PipelineDetailsTab.GRAPH !== activeTabKey}
-                style={{ height: '100%' }}
-                data-testid="pipeline-version-topology-content"
-              >
-                {nodes.length === 0 ? (
-                  <PipelineTopologyEmpty />
-                ) : (
-                  <PipelineTopology
-                    nodes={nodes}
-                    selectedIds={selectedId ? [selectedId] : []}
-                    onSelectionChange={(ids) => {
-                      setSelectedId(ids.length ? ids[0] : null);
-                    }}
-                    sidePanel={panelContent}
+                sidePanel={
+                  <SelectedTaskDrawerContent
+                    task={selectedNode?.data.pipelineTask}
+                    onClose={() => setSelectedId(null)}
                   />
-                )}
-              </TabContent>
-              <TabContent
-                id={`tabContent-${PipelineDetailsTab.YAML}`}
-                eventKey={PipelineDetailsTab.YAML}
-                activeKey={activeTabKey}
-                hidden={PipelineDetailsTab.YAML !== activeTabKey}
-                className="pf-v5-u-h-100"
-              >
-                <TabContentBody hasPadding className="pf-v5-u-h-100">
-                  <PipelineDetailsYAML
-                    filename={`Pipeline ${
-                      getCorePipelineSpec(pipelineVersion?.pipeline_spec)?.pipelineInfo.name ??
-                      'details'
-                    }`}
-                    content={pipelineVersion?.pipeline_spec}
-                  />
-                </TabContentBody>
-              </TabContent>
-            </FlexItem>
-          </Flex>
+                }
+              />
+            )}
+          </TabContent>
+          <TabContent
+            id={`tabContent-${PipelineDetailsTab.YAML}`}
+            eventKey={PipelineDetailsTab.YAML}
+            activeKey={activeTabKey}
+            hidden={PipelineDetailsTab.YAML !== activeTabKey}
+            className="pf-v5-u-h-100"
+          >
+            <TabContentBody hasPadding className="pf-v5-u-h-100">
+              <PipelineDetailsYAML
+                filename={`Pipeline ${
+                  getCorePipelineSpec(pipelineVersion?.pipeline_spec)?.pipelineInfo.name ??
+                  'details'
+                }`}
+                content={pipelineVersion?.pipeline_spec}
+              />
+            </TabContentBody>
+          </TabContent>
         </PageSection>
       </ApplicationsPage>
       {pipeline && (
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx
index fa076175e7..817abf66c9 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx
@@ -47,66 +47,58 @@ export const PipelineRunDetailsTabs: React.FC<PipelineRunDetailsTabsProps> = ({
       style={{ flexBasis: 0, overflowY: 'hidden' }}
       variant="light"
     >
-      <Flex
-        direction={{ default: 'column' }}
-        style={{ height: '100%' }}
-        spaceItems={{ default: 'spaceItemsNone' }}
+      <Tabs
+        activeKey={activeKey}
+        onSelect={(_, eventKey) => setActiveKey(eventKey)}
+        aria-label="Pipeline run details tabs"
       >
-        <FlexItem>
-          <Tabs
-            activeKey={activeKey}
-            onSelect={(_, eventKey) => setActiveKey(eventKey)}
-            aria-label="Pipeline run details tabs"
-          >
-            <Tab
-              eventKey={DetailsTabKey.Graph}
-              tabContentId={DetailsTabKey.Graph}
-              title={<TabTitleText>Graph</TabTitleText>}
-              aria-label="Run graph tab"
-              data-testid="pipeline-run-tab-graph"
-            />
-            <Tab
-              eventKey={DetailsTabKey.Details}
-              title={<TabTitleText>Details</TabTitleText>}
-              aria-label="Run details tab"
-              data-testid="pipeline-run-tab-details"
-            >
-              <TabContentBody hasPadding>
-                <PipelineRunTabDetails workflowName={run?.display_name} run={run} />
-              </TabContentBody>
-            </Tab>
-            {!isJob && pipelineSpec && (
-              <Tab
-                eventKey={DetailsTabKey.Spec}
-                tabContentId={DetailsTabKey.Spec}
-                title={<TabTitleText>Pipeline spec</TabTitleText>}
-                aria-label="Run spec tab"
-                data-testid="pipeline-run-tab-spec"
-              />
-            )}
-          </Tabs>
-        </FlexItem>
-        <FlexItem flex={{ default: 'flex_1' }} style={{ overflowY: 'hidden' }}>
-          <TabContent
-            id={DetailsTabKey.Graph}
-            eventKey={DetailsTabKey.Graph}
-            className="pf-v5-u-h-100"
-            hidden={activeKey !== DetailsTabKey.Graph}
-          >
-            <TabContentBody className="pf-v5-u-h-100">{graphContent}</TabContentBody>
-          </TabContent>
-          <TabContent
-            id={DetailsTabKey.Spec}
+        <Tab
+          eventKey={DetailsTabKey.Graph}
+          tabContentId={DetailsTabKey.Graph}
+          title={<TabTitleText>Graph</TabTitleText>}
+          aria-label="Run graph tab"
+          data-testid="pipeline-run-tab-graph"
+        />
+        <Tab
+          eventKey={DetailsTabKey.Details}
+          title={<TabTitleText>Details</TabTitleText>}
+          aria-label="Run details tab"
+          data-testid="pipeline-run-tab-details"
+        >
+          <TabContentBody hasPadding>
+            <PipelineRunTabDetails workflowName={run?.display_name} run={run} />
+          </TabContentBody>
+        </Tab>
+        {!isJob && pipelineSpec && (
+          <Tab
             eventKey={DetailsTabKey.Spec}
-            hidden={activeKey !== DetailsTabKey.Spec}
-            style={{ flex: 1 }}
-          >
-            <TabContentBody className="pf-v5-u-h-100" hasPadding>
-              <PipelineDetailsYAML filename={run?.display_name} content={pipelineSpec} />
-            </TabContentBody>
-          </TabContent>
-        </FlexItem>
-      </Flex>
+            tabContentId={DetailsTabKey.Spec}
+            title={<TabTitleText>Pipeline spec</TabTitleText>}
+            aria-label="Run spec tab"
+            data-testid="pipeline-run-tab-spec"
+          />
+        )}
+      </Tabs>
+
+      <TabContent
+        id={DetailsTabKey.Graph}
+        eventKey={DetailsTabKey.Graph}
+        className="pf-v5-u-h-100"
+        hidden={activeKey !== DetailsTabKey.Graph}
+      >
+        <TabContentBody className="pf-v5-u-h-100">{graphContent}</TabContentBody>
+      </TabContent>
+      <TabContent
+        id={DetailsTabKey.Spec}
+        eventKey={DetailsTabKey.Spec}
+        hidden={activeKey !== DetailsTabKey.Spec}
+        className="pf-v5-u-h-100"
+        style={{ flex: 1 }}
+      >
+        <TabContentBody className="pf-v5-u-h-100" hasPadding>
+          <PipelineDetailsYAML filename={run?.display_name} content={pipelineSpec} />
+        </TabContentBody>
+      </TabContent>
     </PageSection>
   );
 };
diff --git a/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx b/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx
index 488b579ba6..96c29b68c9 100644
--- a/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx
+++ b/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx
@@ -37,18 +37,25 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
   const controller = useVisualizationController();
   const [error, setError] = React.useState<Error | null>();
 
+  const selectedNode = React.useMemo(() => {
+    if (selectedIds?.[0]) {
+      const node = controller.getNodeById(selectedIds[0]);
+      if (node) {
+        return node;
+      }
+    }
+    return null;
+  }, [selectedIds, controller]);
+
   React.useEffect(() => {
     let resizeTimeout: NodeJS.Timeout | null;
 
-    if (selectedIds?.[0]) {
-      const selectedNode = controller.getNodeById(selectedIds[0]);
-      if (selectedNode) {
-        // Use a timeout in order to allow the side panel to be shown and window size recomputed
-        resizeTimeout = setTimeout(() => {
-          controller.getGraph().panIntoView(selectedNode, { offset: 20, minimumVisible: 100 });
-          resizeTimeout = null;
-        }, 500);
-      }
+    if (selectedNode) {
+      // Use a timeout in order to allow the side panel to be shown and window size recomputed
+      resizeTimeout = setTimeout(() => {
+        controller.getGraph().panIntoView(selectedNode, { offset: 20, minimumVisible: 100 });
+        resizeTimeout = null;
+      }, 500);
     }
     return () => {
       if (resizeTimeout) {
@@ -182,7 +189,7 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
           })}
         />
       }
-      sideBarOpen={!!sidePanel}
+      sideBarOpen={!!selectedNode}
       sideBarResizable
       sideBar={<TopologySideBar resizable>{sidePanel}</TopologySideBar>}
     >