[RHOAIENG-7942]: Update Side Panel Behavior to Pan Graph on Node Sele…

…ction 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
opendatahub-io · Jul 3, 2024 · c261015 · c261015
1 parent 8a97f84
commit c261015
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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/...nd/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx b/...nd/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>