fix tooltip padding on website

packages/components/src/components/ui/Modal.tsx

@@ -165,16 +165,14 @@ export const Modal: ModalType = ({ children, container, close }) => {
   }, [close]);
 
   const modal = (
-    <SquiggleContainer>
-      <ModalContext.Provider value={{ close }}>
-        <div className="squiggle">
-          <div className="fixed inset-0 z-40 flex justify-center items-center">
-            <Overlay />
-            <ModalWindow container={container}>{children}</ModalWindow>
-          </div>
+    <ModalContext.Provider value={{ close }}>
+      <div className="squiggle">
+        <div className="fixed inset-0 z-40 flex justify-center items-center">
+          <Overlay />
+          <ModalWindow container={container}>{children}</ModalWindow>
         </div>
-      </ModalContext.Provider>
-    </SquiggleContainer>
+      </div>
+    </ModalContext.Provider>
   );
 
   return ReactDOM.createPortal(modal, container || el);

packages/components/src/components/ui/Tooltip.tsx

@@ -54,7 +54,7 @@ export const Tooltip: React.FC<Props> = ({ text, children }) => {
               },
             })}
           >
-            <pre>{text}</pre>
+            <div className="font-mono whitespace-pre">{text}</div>
           </motion.div>
         )}
       </AnimatePresence>