ErrorBoundary: add error boundary to IconGrid

src/components/IconGrid/IconGrid.css

@@ -52,7 +52,7 @@
   width: 100%;
   height: 0px;
   margin: 0px;
-  padding-right: 10%;
+  /* padding-right: 10%; */
   border-radius: 16px;
   overflow: hidden;
 }
@@ -110,6 +110,16 @@
   height: 48px;
 }
 
+.close {
+  width: 10%;
+  text-align: end;
+}
+
+.close-icon {
+  margin: 24px;
+  cursor: pointer;
+}
+
 .empty-list {
   display: flex;
   flex-direction: column;

src/components/IconGrid/IconGridItem.tsx

@@ -11,6 +11,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import { iconPreviewOpenAtom } from "../../state/atoms";
 import { IconProps, Icon } from "phosphor-react";
 import InfoPanel from "./InfoPanel";
+import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
 
 interface IconGridItemProps extends IconProps {
   index: number;
@@ -100,7 +101,9 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
         <p>{name}</p>
       </motion.div>
       <AnimatePresence initial={false}>
+        <ErrorBoundary fallback={<p>NOOOOOO</p>}>
         {isOpen && <InfoPanel {...props} />}
+        </ErrorBoundary>
       </AnimatePresence>
     </>
   );