fix: further improvements to spacing and borders in react ui

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

pdl-live-react/src/Page.css

@@ -0,0 +1,4 @@
+.pdl-content-section {
+  /* This places the content e.g. editors flush with the tabs */
+  padding-top: 0;
+}

pdl-live-react/src/Page.tsx

@@ -14,6 +14,8 @@ import DrawerContent from "./DrawerContent"
 import DrawerContext from "./DrawerContentContext"
 import DarkModeContext, { getDarkModeUserSetting } from "./DarkModeContext"
 
+import "./Page.css"
+
 const notFilled = { isFilled: false }
 
 type Props = PropsWithChildren<{
@@ -67,6 +69,7 @@ export default function PDLPage({ breadcrumb1, breadcrumb2, children }: Props) {
       <PageSection
         isFilled
         hasOverflowScroll
+        className="pdl-content-section"
         aria-label="PDL Viewer main section"
       >
         <DrawerContext.Provider value={setDrawerContent}>

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

@@ -0,0 +1,3 @@
+.pdl-final-result {
+  margin-top: 2em;
+}

pdl-live-react/src/view/transcript/Output.tsx

@@ -1,28 +1,39 @@
 import { match, P } from "ts-pattern"
+import { Card, CardBody } from "@patternfly/react-core"
 
 import Markdown from "../Markdown"
 import { isMarkdownish, type PdlBlock } from "../../helpers"
 
 export default function Output({ data }: { data: PdlBlock }) {
-  return match(data)
-    .with(
-      P.string,
-      (output) =>
-        output.trim().length > 0 &&
-        (!isMarkdownish(output) ? (
-          <span className="pdl-wrap">{output.trim()}</span>
-        ) : (
-          <Markdown>{output}</Markdown>
-        )),
-    )
-    .with(P.union(P.number, P.boolean, P.nullish), (output) => String(output))
-    .with({ contribute: P.union([], ["context"]) }, () => {
-      //div.classList.add('pdl_show_result_false'); // @nickm TODO
-      return "☐"
-    })
-    .with({ result: P.string }, (data) => <Markdown>{data.result}</Markdown>)
-    .with({ result: P._ }, (data) => (
-      <pre>{JSON.stringify(data.result, undefined, 2)}</pre>
-    ))
-    .otherwise(() => "☐")
+  return (
+    <Card className="pdl-transcript-item pdl-output" variant="secondary">
+      <CardBody>
+        {match(data)
+          .with(
+            P.string,
+            (output) =>
+              output.trim().length > 0 &&
+              (!isMarkdownish(output) ? (
+                <span className="pdl-wrap">{output.trim()}</span>
+              ) : (
+                <Markdown>{output}</Markdown>
+              )),
+          )
+          .with(P.union(P.number, P.boolean, P.nullish), (output) =>
+            String(output),
+          )
+          .with({ contribute: P.union([], ["context"]) }, () => {
+            //div.classList.add('pdl_show_result_false'); // @nickm TODO
+            return "☐"
+          })
+          .with({ result: P.string }, (data) => (
+            <Markdown>{data.result}</Markdown>
+          ))
+          .with({ result: P._ }, (data) => (
+            <pre>{JSON.stringify(data.result, undefined, 2)}</pre>
+          ))
+          .otherwise(() => "☐")}
+      </CardBody>
+    </Card>
+  )
 }

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

@@ -1,30 +1,41 @@
 .pdl-transcript-item {
+  --pdl-transcript-item-border: var(--pf-v6-c-card--BorderColor)
+    var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
+
   border-radius: 0;
+
   &:before {
     border: none;
+    border-top: var(--pdl-transcript-item-border);
+    border-bottom: var(--pdl-transcript-item-border);
   }
   &:hover {
     cursor: pointer;
     background-color: var(--pf-t--global--background--color--primary--hover);
   }
-  &:not(:first-child) {
-    border-top: var(--pf-v6-c-card--BorderColor)
-      var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
+}
+
+.pdl-transcript-item:not(.pf-m-secondary) + .pdl-transcript-item {
+  &:before {
+    border-top: none;
+  }
+}
+
+.pdl-output + .pdl-output {
+  .pf-v6-c-card__body {
+    padding-top: 0;
   }
 }
 
+.pdl-output + .pdl-transcript-item {
+}
+
 .pdl-block-icon {
   font-size: 1.375em;
 }
 
-.pdl-transcript {
+.pdl-transcript,
+.pdl-final-result {
   max-width: 800px;
-
-  .pf-v6-c-accordion__expandable-content {
-    background-color: transparent;
-  }
-
-  .pdl-result-panel {
-    --pf-v6-c-panel--BackgroundColor: transparent;
-  }
+  height: auto;
 }

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

@@ -33,9 +33,11 @@ export default function Transcript({ data }: Props) {
   }, [darkMode, setDrawerContent])
 
   return (
-    <Stack className="pdl-transcript">
-      <BlocksConjoin block={data} ctx={ctx} />
+    <>
+      <Stack className="pdl-transcript">
+        <BlocksConjoin block={data} ctx={ctx} />
+      </Stack>
       {hasResult(data) && <FinalResult block={data} />}
-    </Stack>
+    </>
   )
 }