Typo and using details for Toggle

ide/packages/panoptes/src/TreeView/BottomUp.tsx

@@ -240,7 +240,7 @@ export const RenderBottomUpSets = ({
   return (
     <TreeAppContext.TreeRenderContext.Provider value={SubsetRenderParams}>
       <p>
-        Argus recommends investigating these failed oblgiations. Click on ’
+        Argus recommends investigating these failed obligations. Click on ’
         {otherLabel}‘ below to see other failed obligations.
       </p>
       <div id="recommended-failure-list">{argusRecommends}</div>

ide/packages/print/src/Toggle.css

@@ -1,14 +1,16 @@
-.toggle-box {
-  display: inline;  
+details.toggle-box {
+  display: inline-block;  
   border: 1px solid var(--vscode-textCodeBlock-background);
   border-radius: 4px;
 }
 
-.toggle-box.expanded {
-  display: inline-block;
+details[open].toggle-box > summary {
+  display: none;
 }
 
-.toggle-box .summary {
+details.toggle-box > summary {
+  list-style: none;
+
   color: var(--vscode-input-placeholderForeground);
   font-size: 80%;
 }

ide/packages/print/src/Toggle.tsx

@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import React, { useState } from "react";
 
 import "./Toggle.css";
@@ -13,14 +12,17 @@ export const Toggle = ({
   const [expanded, setExpanded] = useState(false);
   return (
     // biome-ignore lint/a11y/useKeyWithClickEvents: TODO
-    <div
-      className={classNames("toggle-box", { expanded })}
+    <details
+      className="toggle-box"
+      open={expanded}
       onClick={e => {
+        e.preventDefault();
         e.stopPropagation();
-        setExpanded(!expanded);
+        setExpanded(e => !e);
       }}
     >
-      {expanded ? <Children /> : <span className="summary">{summary}</span>}
-    </div>
+      <summary>{summary}</summary>
+      <Children />
+    </details>
   );
 };