Fix render issue in Panels and MonoSpace issue in ParamEnv

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

@@ -72,7 +72,7 @@ const Panels = ({
   // NOTE: rerenders should not occur if the user clicks on a tab. We cache the
   // elements in state to avoid this. IFF the change is *programatic*, meaning
   // some GUI action caused the change, we always want to force a rerender so that
-  // state change visuals are shown.
+  // state change animations are shown.
   useEffect(() => {
     console.debug(`Panel(${id}) params changed`, active, programaticSwitch);
     if (programaticSwitch) {
@@ -126,6 +126,7 @@ const Panels = ({
     if (idx < 0 || description.length <= idx) {
       setTabs(idx, undefined);
       setPanels(idx, undefined);
+      return;
     }
 
     const d = desc ?? description[idx];

ide/packages/print/src/private/predicate.tsx

@@ -15,6 +15,7 @@ import React from "react";
 
 import { HoverInfo } from "../HoverInfo";
 import { IcoNote } from "../Icons";
+import MonoSpace from "../MonoSpace";
 import { PrintGroupedClauses } from "./argus";
 import { PrintConst } from "./const";
 import { PrintDefinitionPath } from "./path";
@@ -33,7 +34,13 @@ export const PrintPredicateObligation = ({ o }: { o: PredicateObligation }) => {
     o.paramEnv.grouped,
     o.paramEnv.other
   ) ? null : (
-    <HoverInfo Content={() => <PrintParamEnv o={o.paramEnv} />}>
+    <HoverInfo
+      Content={() => (
+        <MonoSpace>
+          <PrintParamEnv o={o.paramEnv} />
+        </MonoSpace>
+      )}
+    >
       {" "}
       <IcoNote />
     </HoverInfo>