fix: inner scrolling on tabs

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

Author: starpit

pdl-live-react/src/Page.tsx

@@ -6,13 +6,16 @@ import {
   PageSection,
 } from "@patternfly/react-core"
 
-import Masthead from "./Masthead"
 import Sidebar from "./Sidebar"
+import Masthead from "./Masthead"
+import ViewerTabs from "./ViewerTabs"
 import DrawerContent from "./DrawerContent"
 
 import DrawerContext from "./DrawerContentContext"
 import DarkModeContext, { getDarkModeUserSetting } from "./DarkModeContext"
 
+const notFilled = { isFilled: false }
+
 type Props = PropsWithChildren<{
   breadcrumb1?: string
   breadcrumb2?: string
@@ -49,6 +52,9 @@ export default function PDLPage({ breadcrumb1, breadcrumb2, children }: Props) {
           <Masthead setDarkMode={setDarkMode} />
         </DarkModeContext.Provider>
       }
+      horizontalSubnav={<ViewerTabs />}
+      groupProps={notFilled /* so breadcrumbs aren't filled */}
+      isBreadcrumbGrouped
       breadcrumb={
         breadcrumb1 && (
           <Breadcrumb>
@@ -60,7 +66,7 @@ export default function PDLPage({ breadcrumb1, breadcrumb2, children }: Props) {
     >
       <PageSection
         isFilled
-        hasOverflowScroll={false}
+        hasOverflowScroll
         aria-label="PDL Viewer main section"
       >
         <DrawerContext.Provider value={setDrawerContent}>

pdl-live-react/src/Viewer.css

@@ -8,3 +8,15 @@
 .pdl-mono {
   font-family: var(--pf-t--global--font--family--mono);
 }
+
+.pf-v6-c-page__main-body {
+  flex: 1;
+
+  & > section[data-fill-height] {
+    height: 100%;
+  }
+}
+.pdl-viewer-tab:not([hidden]) {
+  height: 100%;
+  overflow: auto;
+}

pdl-live-react/src/Viewer.tsx

@@ -1,8 +1,6 @@
 import { useLocation } from "react-router"
 import { useContext, useMemo } from "react"
 
-import { Tabs, Tab, TabTitleText } from "@patternfly/react-core"
-
 import Code from "./view/Code"
 import Transcript from "./view/transcript/Transcript"
 import DarkModeContext from "./DarkModeContext"
@@ -14,7 +12,7 @@ import "./Viewer.css"
 /** This is the main view component */
 export default function Viewer({ value }: { value: string }) {
   // We will use this to find the current active tab (below)
-  let { hash: activeTab } = useLocation()
+  const { hash: activeTab } = useLocation()
 
   // DarkMode state
   const darkMode = useContext(DarkModeContext)
@@ -28,45 +26,17 @@ export default function Viewer({ value }: { value: string }) {
     return "Invalid trace content"
   }
 
-  // Note: please keep eventKey===href
-  const tabs = [
-    <Tab
-      key="#transcript"
-      href="#transcript"
-      eventKey="#transcript"
-      className="pdl-viewer-tab"
-      title={<TabTitleText>Transcript</TabTitleText>}
-    >
-      <Transcript data={data} />
-    </Tab>,
-    <Tab
-      key="#source"
-      href="#source"
-      eventKey="#source"
-      className="pdl-viewer-tab"
-      title={<TabTitleText>Source</TabTitleText>}
-    >
-      <Code block={data} darkMode={darkMode} limitHeight={false} />
-    </Tab>,
-    <Tab
-      key="#raw"
-      href="#raw"
-      eventKey="#raw"
-      className="pdl-viewer-tab"
-      title={<TabTitleText>Raw Trace</TabTitleText>}
-    >
-      <Code block={data} darkMode={darkMode} limitHeight={false} raw />
-    </Tab>,
-  ]
-
-  if (!tabs.find((tab) => tab.props.href === activeTab)) {
-    // User provided bogus hash, default to first tab
-    activeTab = tabs[0].props.href
-  }
-
   return (
-    <Tabs activeKey={activeTab} component="nav">
-      {tabs}
-    </Tabs>
+    <>
+      <section hidden={activeTab !== "#source"}>
+        <Code block={data} darkMode={darkMode} limitHeight={false} />
+      </section>
+      <section hidden={activeTab !== "raw"}>
+        <Code block={data} darkMode={darkMode} limitHeight={false} raw />
+      </section>
+      <section hidden={activeTab === "#source" || activeTab === "#raw"}>
+        <Transcript data={data} />
+      </section>
+    </>
   )
 }

pdl-live-react/src/ViewerTabs.tsx

@@ -0,0 +1,46 @@
+import { useLocation } from "react-router"
+import { Tabs, Tab, TabTitleText } from "@patternfly/react-core"
+
+import "./Viewer.css"
+
+/** This is the main view component */
+export default function Viewer() {
+  // We will use this to find the current active tab (below)
+  let { hash: activeTab } = useLocation()
+
+  // Note: please keep eventKey===href
+  const tabs = [
+    <Tab
+      key="#transcript"
+      href="#transcript"
+      eventKey="#transcript"
+      className="pdl-viewer-tab"
+      title={<TabTitleText>Transcript</TabTitleText>}
+    />,
+    <Tab
+      key="#source"
+      href="#source"
+      eventKey="#source"
+      className="pdl-viewer-tab"
+      title={<TabTitleText>Source</TabTitleText>}
+    />,
+    <Tab
+      key="#raw"
+      href="#raw"
+      eventKey="#raw"
+      className="pdl-viewer-tab"
+      title={<TabTitleText>Raw Trace</TabTitleText>}
+    />,
+  ]
+
+  if (!tabs.find((tab) => tab.props.href === activeTab)) {
+    // User provided bogus hash, default to first tab
+    activeTab = tabs[0].props.href
+  }
+
+  return (
+    <Tabs activeKey={activeTab} component="nav">
+      {tabs}
+    </Tabs>
+  )
+}

pdl-live-react/src/view/transcript/Transcript.css

@@ -1,6 +1,6 @@
 .pdl-transcript-item {
   &:first-child {
-    margin-top: 1em;
+    /* margin-top: 1em; */
   }
 }