From c261015d388bfd97bb792c244b16c4da72e60908 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Mon, 17 Jun 2024 16:47:57 -0400
Subject: [PATCH] [RHOAIENG-7942]: Update Side Panel Behavior to Pan Graph on
 Node Selection

Fix side panel sizing, scrolling, and contents (#8)

apply light variants to page section, fix linting issue

Gage PR feedback

fix tests

add flexItems and minWidth
---
 .../pipelinesDetails/pipelineRun/PipelineRunDetails.tsx  | 9 +++++++--
 .../pipelineRun/PipelineRunDetailsTabs.tsx               | 2 ++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
index ddecfb44e1..6cb2b98be4 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
@@ -135,14 +135,19 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
                     runType,
                   )}
                 >
-                  <Truncate content={version.display_name} />
+                  {/* TODO: Remove the custom className after upgrading to PFv6 */}
+                  <Truncate content={version.display_name} className="truncate-no-min-width" />
                 </Link>
               ) : (
                 'Loading...'
               )}
             </BreadcrumbItem>
             <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
-              <Truncate content={run?.display_name ?? 'Loading...'} />
+              {/* TODO: Remove the custom className after upgrading to PFv6 */}
+              <Truncate
+                content={run?.display_name ?? 'Loading...'}
+                className="truncate-no-min-width"
+              />
             </BreadcrumbItem>
           </Breadcrumb>
         }
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx
index 00d588ec58..3681fc4657 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx
@@ -45,6 +45,7 @@ export const PipelineRunDetailsTabs: React.FC<PipelineRunDetailsTabsProps> = ({
       isFilled
       padding={{ default: 'noPadding' }}
       style={{ flexBasis: 0, overflowY: 'hidden' }}
+      variant="light"
     >
       <Flex
         direction={{ default: 'column' }}
@@ -98,6 +99,7 @@ export const PipelineRunDetailsTabs: React.FC<PipelineRunDetailsTabsProps> = ({
             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>