do not display the toaster component if there are no toast items

Author: aradzie

packages/keybr-widget/lib/components/toast/Toaster.module.less

@@ -11,9 +11,8 @@
   margin-inline: auto auto;
   margin-block: auto 0;
   padding: 3rem;
-  pointer-events: none;
 }
 
-.toaster > * {
-  pointer-events: auto;
+.toaster[hidden] {
+  display: none;
 }

packages/keybr-widget/lib/components/toast/Toaster.tsx

@@ -8,7 +8,7 @@ export function Toaster(): ReactNode {
   const [toasts, setToasts] = useState(state.toasts);
   useEffect(() => state.listen(setToasts), [toasts]);
   return (
-    <div className={styles.toaster}>
+    <div className={styles.toaster} hidden={toasts.length === 0}>
       {[...toasts].reverse().map((toast) => (
         <ToastProvider key={toast.key} toast={toast}>
           <ToastWrapper>{toast.message}</ToastWrapper>