Monospace pipes and toggles to fix styling issues

opensafely-core · Jan 8, 2025 · 8f74648 · 8f74648
1 parent 6cac6c1
commit 8f74648
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/assets/src/scripts/components/DescendantToggle.jsx b/assets/src/scripts/components/DescendantToggle.jsx
@@ -3,13 +3,14 @@ import React from "react";
 
 function DescendantToggle({ isExpanded, path, toggleVisibility }) {
   return (
-    <span
+    <button
+      className="p-0 bg-white border-0 text-monospace d-inline-block ml-1 mr-2"
       onClick={toggleVisibility.bind(null, path)}
-      style={{ cursor: "pointer", marginLeft: "2px", marginRight: "4px" }}
+      type="button"
     >
       {" "}
       {isExpanded ? "⊟" : "⊞"}
-    </span>
+    </button>
   );
 }
 

diff --git a/assets/src/scripts/components/Pipes.jsx b/assets/src/scripts/components/Pipes.jsx
@@ -5,13 +5,7 @@ function Pipes({ pipes }) {
   return pipes.map((pipe, ix) => (
     <span
       key={ix}
-      style={{
-        display: "inline-block",
-        textAlign: "center",
-        paddingLeft: "3px",
-        paddingRight: "6px",
-        width: "20px",
-      }}
+      className="d-inline-block pl-1 pr-2 text-center text-monospace"
     >
       {pipe}
     </span>