fix: in react ui, add Back to Top and use secondary styling for source button

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

Author: starpit

pdl-live-react/src/page/Page.css

@@ -14,8 +14,6 @@ import DarkModeContext, {
   getDarkModeUserSetting,
 } from "./DarkModeContext"
 
-import "./Page.css"
-
 const withPadding = { default: "padding" as const }
 const withoutPadding = { default: "noPadding" as const }
 
@@ -40,6 +38,7 @@ export default function PDLPage(props: Props) {
   const showingDetail = searchParams.has("detail") && !!value
 
   if (value) {
+    // Fail fast if `value` is bogus
     JSON.parse(value)
   }
 

pdl-live-react/src/page/Page.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react"
-import { PageSection } from "@patternfly/react-core"
+import { BackToTop, PageSection } from "@patternfly/react-core"
 
 import Timeline from "../timeline/TimelineFromModel"
 
@@ -49,13 +49,15 @@ export default function MasonryTimelineCombo({ block }: Props) {
       <PageSection
         isFilled
         hasOverflowScroll
-        className="pdl-content-section"
+        className="pdl-content-section pdl-masonry-page-section"
         aria-label="PDL Viewer main section"
       >
         <Masonry model={masonry} as={as} sml={sml}>
           <Timeline model={base} numbering={numbering} />
         </Masonry>
       </PageSection>
+
+      <BackToTop scrollableSelector=".pdl-masonry-page-section" />
     </>
   )
 }

pdl-live-react/src/view/masonry/MasonryTimelineCombo.tsx

@@ -15,7 +15,12 @@ export default function ToolbarProgramOrSourceToggle() {
 
   return (
     <Tooltip content="Show program source">
-      <Button size="sm" icon={<CodeIcon />} onClick={handleClickSource} />
+      <Button
+        size="sm"
+        variant="secondary"
+        icon={<CodeIcon />}
+        onClick={handleClickSource}
+      />
     </Tooltip>
   )
 }