Skip to content

fix: pds page style bug #1861

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexdln merged 3 commits into from
Mar 13, 2026
+36 −46
Merged

fix: pds page style bug #1861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fa9ab0c
fix: pds page style bug
RYGRIT Mar 3, 2026
b4993f9
Merge branch 'main' into fix/pds-page-style-bug
alexdln Mar 13, 2026
4168943
fix: use tooltip-app for npmx community handles
alexdln Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 17 additions & 22 deletions app/pages/about.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,29 +275,24 @@ const roleLabels = computed(
:key="contributor.id"
class="block group relative"
>
<a
:href="contributor.html_url"
target="_blank"
rel="noopener noreferrer"
:aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
class="block rounded-lg"
>
<img
:src="`${contributor.avatar_url}&s=64`"
:alt="`${contributor.login}'s avatar`"
width="48"
height="48"
class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out group-hover:scale-125 will-change-transform"
loading="lazy"
/>
<span
class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
dir="ltr"
role="tooltip"
<TooltipApp :text="`@${contributor.login}`" class="block" position="top">
<a
:href="contributor.html_url"
target="_blank"
rel="noopener noreferrer"
:aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
class="block rounded-lg"
>
@{{ contributor.login }}
</span>
</a>
<img
:src="`${contributor.avatar_url}&s=64`"
:alt="`${contributor.login}'s avatar`"
width="48"
height="48"
class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out group-hover:scale-125 will-change-transform"
loading="lazy"
/>
</a>
</TooltipApp>
</li>
</ul>
</section>
Expand Down
43 changes: 19 additions & 24 deletions app/pages/pds.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const totalAccounts = computed(() => pdsUsers.value.length)
</script>

<template>
<main class="container flex-1 py-12 sm:py-16">
<main class="container flex-1 py-12 sm:py-16 overflow-x-hidden">
<article class="max-w-2xl mx-auto">
<header class="mb-12">
<div class="flex items-baseline justify-between gap-4 mb-4">
Expand Down Expand Up @@ -156,30 +156,25 @@ const totalAccounts = computed(() => pdsUsers.value.length)
:key="user.handle"
class="block group relative hover:z-10"
>
<a
:href="`https://bsky.app/profile/${user.handle}`"
target="_blank"
rel="noopener noreferrer"
:aria-label="$t('pds.community.view_profile', { handle: user.handle })"
class="block rounded-lg"
>
<img
:src="user.avatar"
:alt="`${user.handle}'s avatar`"
@error="handleImageError(user.handle)"
width="48"
height="48"
class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out group-hover:scale-125 will-change-transform"
loading="lazy"
/>
<span
class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
dir="ltr"
role="tooltip"
<TooltipApp :text="`@${user.handle}`" class="block" position="top">
<a
:href="`https://bsky.app/profile/${user.handle}`"
target="_blank"
rel="noopener noreferrer"
:aria-label="$t('pds.community.view_profile', { handle: user.handle })"
class="block rounded-lg"
>
@{{ user.handle }}
</span>
</a>
<img
:src="user.avatar"
:alt="`${user.handle}'s avatar`"
@error="handleImageError(user.handle)"
width="48"
height="48"
class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out group-hover:scale-125 will-change-transform"
loading="lazy"
/>
</a>
</TooltipApp>
</li>
</ul>
<p v-if="usersWithoutAvatars.length" class="text-center mt-4 text-fg-muted text-sm">
Expand Down
Loading