fix: restore top-level breadcrumbs

These got lost in a recent refactoring

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

Author: starpit

pdl-live-react/src/App.tsx

@@ -26,7 +26,7 @@ export default function App() {
         <Route
           key={demo.name}
           path={`/demos/${demo.name}`}
-          element={<Demo value={demo.trace} />}
+          element={<Demo name={demo.name} value={demo.trace} />}
         />
       ))}
 

pdl-live-react/src/Demo.tsx

@@ -2,13 +2,14 @@ import Page from "./Page"
 import Viewer from "./Viewer"
 
 type Props = {
+  name: string
   value: string
 }
 
-export default function Demo(props: Props) {
+export default function Demo({ name, value }: Props) {
   return (
-    <Page>
-      <Viewer {...props} />
+    <Page breadcrumb1="Demo" breadcrumb2={name}>
+      <Viewer value={value} />
     </Page>
   )
 }

pdl-live-react/src/Page.tsx

@@ -60,7 +60,7 @@ export default function PDLPage({ breadcrumb1, breadcrumb2, children }: Props) {
     >
       <PageSection
         isFilled
-        hasOverflowScroll
+        hasOverflowScroll={false}
         aria-label="PDL Viewer main section"
       >
         <DrawerContext.Provider value={setDrawerContent}>

pdl-live-react/src/Uploader.tsx

@@ -97,7 +97,7 @@ export default function Uploader() {
   )
 
   return (
-    <Page>
+    <Page breadcrumb1="Uploader" breadcrumb2={filename}>
       <Form>
         <FormGroup fieldId="text-file-with-restrictions-example">
           <FileUpload

pdl-live-react/src/Viewer.tsx

@@ -34,6 +34,7 @@ export default function Viewer({ value }: { value: string }) {
       key="#transcript"
       href="#transcript"
       eventKey="#transcript"
+      className="pdl-viewer-tab"
       title={<TabTitleText>Transcript</TabTitleText>}
     >
       <Transcript data={data} />
@@ -42,6 +43,7 @@ export default function Viewer({ value }: { value: string }) {
       key="#source"
       href="#source"
       eventKey="#source"
+      className="pdl-viewer-tab"
       title={<TabTitleText>Source</TabTitleText>}
     >
       <Code block={data} darkMode={darkMode} limitHeight={false} />
@@ -50,6 +52,7 @@ export default function Viewer({ value }: { value: string }) {
       key="#raw"
       href="#raw"
       eventKey="#raw"
+      className="pdl-viewer-tab"
       title={<TabTitleText>Raw Trace</TabTitleText>}
     >
       <Code block={data} darkMode={darkMode} limitHeight={false} raw />