cleanup CSS a bit

src/component/expr/InputBlock.tsx

@@ -12,6 +12,7 @@ import { Type as TypeBlock, TypeInfoBlock } from "../other/Type";
 import type { ExprBlockState, State2Props } from "./ExprBlock";
 
 import "./InputBlock.css";
+import { evalExpr } from "../../eval/eval";
 
 interface Literal {
   kind: "literal";
@@ -95,7 +96,6 @@ export function InputBlock({ state, setState, score, onCancel, typeInfo }: Input
   const singleSuggestion = trie.growPrefix(env.names)(text);
   const suggestions = useMemo(() => computeSuggestions(text, env, score), [text, score, env]);
 
-
   useEffect(() => {
     if (focus) {
       inputRef.current?.focus();
@@ -145,29 +145,38 @@ export function InputBlock({ state, setState, score, onCancel, typeInfo }: Input
     },
   };
 
-  return <><Input
-    placeholder="<name or literal>"
-    onCancel={onCancel}
-    onEnter={onSelectSuggestion}
-    onTextChange={onTextChange}
-    text={text}
-    suggestion={singleSuggestion}
-    extraHandlers={extraHandlers}
-    > 
-      <span className="suggestionsPlaceholder">
-        <Suggestions
-          suggestions={suggestions}
-          onSelect={onSelectSuggestion}
-          i={i} setI={setI} />
+  const err = typeInfo.err || evalExpr(state, env).err;
+
+  return <>
+    <Input
+      placeholder="<name or literal>"
+      onCancel={onCancel}
+      onEnter={onSelectSuggestion}
+      onTextChange={onTextChange}
+      text={text}
+      suggestion={singleSuggestion}
+      extraHandlers={extraHandlers}
+      >
+      <span className="dropdownContainer">
+        <span className="dropdown">
+          {(err !== undefined) &&
+            (<div className="errorMessage">
+              {err.message.trim()}
+            </div>)}
+          <Suggestions
+            suggestions={suggestions}
+            onSelect={onSelectSuggestion}
+            i={i} setI={setI} />
+        </span>
       </span>
     </Input>
     ::<TypeInfoBlock typeInfo={typeInfo} />
-    </>
+  </>;
 }
 
 function Suggestions({ suggestions, onSelect, i, setI }) {
   return <>{(suggestions.length > 0) &&
-    <div className={"suggestions"}>
+    <div className={"suggestionsScrollableBox"}>
       {suggestions.map((suggestion, j) =>
         <SuggestionMemo key={j}
           {...{setI, j,