Add Balancer to ItemCard descriptions, add Balancer Provider to app root

src/components/ItemCard.tsx

@@ -3,6 +3,7 @@ import {useOnClickOutside, useToggle} from "usehooks-ts";
 import {classNames, isHoverable} from "../utils/helpers";
 import DependentImage from "./DependentImage";
 import ReactMarkdown from 'react-markdown'
+import Balancer from "react-wrap-balancer";
 
 import Link from "next/link";
 import {useRouter} from "next/router";
@@ -59,7 +60,9 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location, bann
                              e.stopPropagation();
                              navigate();
                          }}>
-                        <ReactMarkdown>{description}</ReactMarkdown>
+                        <Balancer>
+                            <ReactMarkdown>{description}</ReactMarkdown>
+                        </Balancer>
                     </div>
                 </div>
                 {(links?.length ?? 0) > 0 ?

src/pages/_app.tsx

@@ -1,15 +1,19 @@
-import {type AppType} from "next/app";
+import { type AppType } from "next/app";
 
-import {trpc} from "../utils/trpc";
+import { trpc } from "../utils/trpc";
 
 import "../styles/globals.scss";
-import {Analytics} from "@vercel/analytics/react";
+import { Analytics } from "@vercel/analytics/react";
-
+import { Provider } from "react-wrap-balancer";
-const MyApp: AppType = ({Component, pageProps}) => {
+const MyApp: AppType = ({ Component, pageProps }) => {
-    return <>
+  return (
+    <>
+      <Provider>
         <Component {...pageProps} />
-        <Analytics/>
+      </Provider>
-    </>;
+      <Analytics />
+    </>
+  );
 };
 
 export default trpc.withTRPC(MyApp);