fix(ui): add missing AppTooltip usages (#883)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: sybers

app/components/Terminal/Install.vue

@@ -203,9 +203,12 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             <NuxtLink
               :to="`/package/${createPackageInfo.packageName}`"
               class="text-fg-muted hover:text-fg text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-              :title="$t('package.create.view', { packageName: createPackageInfo.packageName })"
             >
-              <span class="i-carbon:information w-3 h-3 mt-1" aria-hidden="true" />
+              <TooltipApp
+                :text="$t('package.create.view', { packageName: createPackageInfo.packageName })"
+              >
+                <span class="i-carbon:information w-3 h-3 mt-1" aria-hidden="true" />
+              </TooltipApp>
               <span class="sr-only">{{
                 $t('package.create.view', { packageName: createPackageInfo.packageName })
               }}</span>

app/components/Tooltip/Base.vue

@@ -40,7 +40,7 @@ const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
         <div
           v-if="props.isVisible"
           ref="tooltipRef"
-          class="px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
+          class="px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-pre-line z-[100] pointer-events-none"
           :style="floatingStyles"
           v-bind="tooltipAttr"
         >

app/pages/package/[...package].vue

@@ -861,11 +861,9 @@ defineOgImageComponent('Package', {
           <div class="space-y-1 sm:col-span-3">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
               {{ $t('package.stats.install_size') }}
-              <span
-                class="i-carbon:information w-3 h-3 text-fg-subtle"
-                aria-hidden="true"
-                :title="sizeTooltip"
-              />
+              <TooltipApp :text="sizeTooltip">
+                <span class="i-carbon:information w-3 h-3 text-fg-subtle" aria-hidden="true" />
+              </TooltipApp>
             </dt>
             <dd class="font-mono text-sm text-fg">
               <!-- Package size (greyed out) -->