Fix user bios and ad width

apps/frontend/src/components/ui/AdPlaceholder.vue

@@ -1,17 +1,24 @@
 <template>
-  <div class="mb-3 flex rounded-2xl">
-    <div class="flex min-h-[250px] min-w-[300px] flex-col gap-4 rounded-2xl bg-bg-raised p-6">
-      <p class="m-0 text-xl font-bold text-contrast">90% of ad revenue goes to creators</p>
-      <nuxt-link to="/plus" class="mt-auto flex items-center gap-1 text-purple hover:underline">
+  <div class="ad-parent mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
+    <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
+      <p class="m-0 text-2xl font-bold text-contrast">90% of ad revenue goes to creators</p>
+      <nuxt-link to="/plus" class="mt-auto items-center gap-1 text-purple hover:underline">
         <span>
-          Go ad-free with
-          <span class="font-bold"><span class="text-contrast">Modrinth</span>+</span>
+          Support creators and Modrinth ad-free with
+          <span class="font-bold">Modrinth+</span>
         </span>
-        <ChevronRightIcon class="h-5 w-5" />
+        <ChevronRightIcon class="relative top-[3px] h-5 w-5" />
       </nuxt-link>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { ChevronRightIcon } from "@modrinth/assets";
 </script>
+<style lang="scss" scoped>
+@media (max-width: 324px) {
+  .ad-parent {
+    display: none;
+  }
+}
+</style>

apps/frontend/src/pages/user/[id].vue

@@ -16,7 +16,13 @@
                 </h1>
               </div>
               <p class="m-0 line-clamp-2 max-w-[40rem]">
-                {{ user.bio ?? projects.length === 0 ? "A Modrinth user." : "A Modrinth creator." }}
+                {{
+                  user.bio
+                    ? user.bio
+                    : projects.length === 0
+                      ? "A Modrinth user."
+                      : "A Modrinth creator."
+                }}
               </p>
             </div>
           </div>