Skip to content

fix: use css modules for package page #1242

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
danielroe merged 1 commit into from
Feb 8, 2026
+60 −62
Merged

fix: use css modules for package page #1242

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
122 changes: 60 additions & 62 deletions app/pages/package/[[org]]/[name].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -517,12 +517,12 @@ onKeyStroke(
<main class="container flex-1 w-full py-8">
<PackageSkeleton v-if="status === 'pending'" />

<article v-else-if="status === 'success' && pkg" class="package-page">
<article v-else-if="status === 'success' && pkg" :class="$style.packagePage">
<!-- Package header -->
<header
class="area-header sticky top-14 z-1 bg-[--bg] py-2 border-border"
class="sticky top-14 z-1 bg-[--bg] py-2 border-border"
ref="header"
:class="{ 'border-b': isHeaderPinned }"
:class="[$style.areaHeader, { 'border-b': isHeaderPinned }]"
>
<!-- Package name and version -->
<div class="flex items-baseline gap-x-2 gap-y-1 sm:gap-x-3 flex-wrap min-w-0">
Expand All @@ -545,10 +545,11 @@ onKeyStroke(
<button
type="button"
@click="copyPkgName()"
class="copy-button absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
:class="
copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border'
"
class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
:class="[
$style.copyButton,
copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border',
]"
:aria-label="copiedPkgName ? $t('common.copied') : $t('package.copy_name')"
>
<span
Expand Down Expand Up @@ -610,7 +611,8 @@ onKeyStroke(
v-if="resolvedVersion"
as="nav"
:aria-label="$t('package.navigation')"
class="package-nav hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-50% max-sm:-translate-x-50% max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md"
class="hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-50% max-sm:-translate-x-50% max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md"
:class="$style.packageNav"
>
<LinkBase
variant="button-secondary"
Expand Down Expand Up @@ -701,7 +703,7 @@ onKeyStroke(
</header>

<!-- Package details -->
<section class="area-details">
<section :class="$style.areaDetails">
<div class="mb-4">
<!-- Description container with min-height to prevent CLS -->
<div class="max-w-2xl min-h-[4.5rem]">
Expand Down Expand Up @@ -978,7 +980,7 @@ onKeyStroke(
</section>

<!-- Binary-only packages: Show only execute command (no install) -->
<section v-if="isBinaryOnly" class="area-install scroll-mt-20">
<section v-if="isBinaryOnly" class="scroll-mt-20" :class="$style.areaInstall">
<div class="flex flex-wrap items-center justify-between mb-3">
<h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
{{ $t('package.run.title') }}
Expand All @@ -1000,7 +1002,7 @@ onKeyStroke(
</section>

<!-- Regular packages: Install command with optional run command -->
<section v-else id="get-started" class="area-install scroll-mt-20">
<section v-else id="get-started" class="scroll-mt-20" :class="$style.areaInstall">
<div class="flex flex-wrap items-center justify-between mb-3">
<h2
id="get-started-heading"
Expand Down Expand Up @@ -1029,7 +1031,7 @@ onKeyStroke(
</div>
</section>

<div class="area-vulns space-y-6">
<div class="space-y-6" :class="$style.areaVulns">
<!-- Bad package warning -->
<PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
<!-- Vulnerability scan -->
Expand All @@ -1049,7 +1051,7 @@ onKeyStroke(
</div>

<!-- README -->
<section id="readme" class="area-readme min-w-0 scroll-mt-20">
<section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
<div class="flex flex-wrap items-center justify-between mb-3 px-1">
<h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
<LinkBase to="#readme">
Expand Down Expand Up @@ -1129,7 +1131,7 @@ onKeyStroke(
</section>
</section>

<PackageSidebar class="area-sidebar">
<PackageSidebar :class="$style.areaSidebar">
<div class="flex flex-col gap-4 sm:gap-6 xl:(pt-2)">
<!-- Team access controls (for scoped packages when connected) -->
<ClientOnly>
Expand Down Expand Up @@ -1212,10 +1214,13 @@ onKeyStroke(
</main>
</template>

<style scoped>
.package-page {
<style module>
.packagePage {
display: grid;
gap: 2rem;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;

/* Mobile: single column, sidebar above readme */
grid-template-columns: minmax(0, 1fr);
Expand All @@ -1230,7 +1235,7 @@ onKeyStroke(

/* Tablet/medium: header/install/vulns full width, readme+sidebar side by side */
@media (min-width: 1024px) {
.package-page {
.packagePage {
grid-template-columns: 2fr 1fr;
grid-template-areas:
'header header'
Expand All @@ -1244,7 +1249,7 @@ onKeyStroke(

/* Desktop: floating sidebar alongside all content */
@media (min-width: 1280px) {
.package-page {
.packagePage {
grid-template-columns: 1fr 20rem;
grid-template-areas:
'header sidebar'
Expand All @@ -1255,68 +1260,61 @@ onKeyStroke(
}
}

.area-header {
grid-area: header;
}

.area-details {
grid-area: details;
}

.area-install {
grid-area: install;
}

.area-vulns {
grid-area: vulns;
overflow-x: hidden;
}

.area-readme {
grid-area: readme;
}

.area-readme > .readme {
overflow-x: hidden;
/* Ensure all children respect max-width */
.packagePage > * {
max-width: 100%;
min-width: 0;
}

.area-sidebar {
grid-area: sidebar;
.areaHeader {
grid-area: header;
}

/* Improve package name wrapping for narrow screens */
.area-header h1 {
.areaHeader h1 {
overflow-wrap: anywhere;
}

/* Ensure description text wraps properly */
.area-header p {
.areaHeader p {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}

.areaDetails {
grid-area: details;
}

.areaInstall {
grid-area: install;
}

/* Allow install command text to break on narrow screens */
.area-install code {
.areaInstall code {
word-break: break-word;
overflow-wrap: anywhere;
white-space: pre-wrap;
}

/* Ensure all text content wraps on narrow screens */
.package-page {
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
.areaVulns {
grid-area: vulns;
overflow-x: hidden;
}

/* Ensure all children respect max-width */
.package-page > * {
max-width: 100%;
min-width: 0;
.areaReadme {
grid-area: readme;
}

.areaReadme > :global(.readme) {
overflow-x: hidden;
}

.areaSidebar {
grid-area: sidebar;
}

.copy-button {
.copyButton {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
Expand All @@ -1331,8 +1329,8 @@ onKeyStroke(
width 0.01s 0.34s allow-discrete;
}

.group:hover .copy-button,
.copy-button:focus-visible {
:global(.group):hover .copyButton,
.copyButton:focus-visible {
clip: auto;
clip-path: none;
height: auto;
Expand All @@ -1344,22 +1342,22 @@ onKeyStroke(
}

@media (hover: none) {
.copy-button {
.copyButton {
display: none;
}
}

/* Mobile floating nav: safe-area positioning + kbd hiding */
@media (max-width: 639.9px) {
.package-nav {
.packageNav {
bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.package-nav > :deep(a kbd) {
.packageNav > :global(a kbd) {
display: none;
}

.package-page {
.packagePage {
padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}
}
Expand Down
Loading