fix ErrorBar: don't take space when hidden

Author: severo

src/components/ErrorBar.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useState } from 'react'
+import { useState } from 'react'
 import { useConfig } from '../hooks/useConfig.js'
 import { cn } from '../lib/utils.js'
 import styles from '../styles/ErrorBar.module.css'
@@ -21,7 +21,7 @@ export default function ErrorBar({ error }: ErrorBarProps) {
 
   return <div
     className={cn(styles.errorBar, customClass?.errorBar)}
-    style={{ '--error-bar-visibility': showError ? 'visible' : 'hidden' } as CSSProperties}
+    data-visible={showError}
   >
     <div>
       <span>{error?.toString()}</span>

src/styles/ErrorBar.module.css

@@ -1,5 +1,5 @@
 .errorBar {
-  visibility: var(--error-bar-visibility, hidden);
+  display: none;
   max-height: 30%;
   padding: 0;
   background-color: #dd111199;
@@ -8,6 +8,10 @@
   white-space: pre-wrap;
   font-family: monospace;
 
+  &[data-visible="true"] {
+    display: block;
+  }
+
   & > div {
     display: flex;
     align-items: center;