fix: improve scrolling ui in detail (sidecar) view

Previously, the whole detail panel would scroll, including header and tabs. With this, only the tab content scrolls.

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/code/PreviewLight.tsx

@@ -19,7 +19,12 @@ type Props = {
   wrap?: boolean
 }
 
-export default function PreviewLight({ language, value, wrap = true }: Props) {
+export default function PreviewLight({
+  language,
+  value,
+  showLineNumbers = false,
+  wrap = true,
+}: Props) {
   useEffect(() => {
     SyntaxHighlighter.registerLanguage("json", json)
     SyntaxHighlighter.registerLanguage("yaml", yaml)
@@ -33,6 +38,7 @@ export default function PreviewLight({ language, value, wrap = true }: Props) {
       style={style}
       language={language}
       wrapLongLines={wrap}
+      showLineNumbers={showLineNumbers}
     >
       {value}
     </SyntaxHighlighter>

pdl-live-react/src/view/detail/DrawerContent.css

@@ -6,4 +6,23 @@
       margin-left: 1em;
     }
   }
+
+  .pf-v6-c-card__body {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .pf-v6-c-tab-content {
+    flex: 1;
+    overflow: auto;
+
+    & > pre {
+      overflow-x: unset !important;
+
+      & > code {
+        white-space: pre-wrap !important;
+      }
+    }
+  }
 }

pdl-live-react/src/view/detail/DrawerContent.tsx

@@ -99,7 +99,7 @@ export default function DrawerContent({ value }: Props) {
   }
 
   return (
-    <Card isPlain isLarge isFullHeight className="pdl-drawer-content">
+    <Card isPlain isLarge className="pdl-drawer-content">
       <CardHeader actions={actions}>
         <CardTitle>{header(objectType)}</CardTitle>
         {block && description(block)}

pdl-live-react/src/view/detail/RawTraceTabContent.tsx

@@ -2,5 +2,5 @@ import Code from "../code/Code"
 import { type NonScalarPdlBlock as Model } from "../../helpers"
 
 export default function RawTraceTabContent({ block }: { block: Model }) {
-  return <Code block={block} showLineNumbers raw wrap={false} />
+  return <Code block={block} raw />
 }

pdl-live-react/src/view/detail/SourceTabContent.tsx

@@ -2,5 +2,5 @@ import Code from "../code/Code"
 import { type NonScalarPdlBlock as Model } from "../../helpers"
 
 export default function SourceTabContent({ block }: { block: Model }) {
-  return <Code block={block} showLineNumbers wrap={false} />
+  return <Code block={block} />
 }