fix(website): plugin page content spans the same width as the header and footer

The page capped itself at max-w-3xl inside the site shell, so the install command, gallery, and README stopped short of the nav's right edge.
This commit is contained in:
Mohamed Boudra
2026-10-06 23:19:16 +02:00
parent bdc58fb07c
commit aedba5ec27
@@ -59,44 +59,42 @@ function PluginPage() {
return (
<SiteShell width="default">
<div className="max-w-3xl">
<a href="/plugins" className="text-sm text-muted-foreground hover:text-foreground">
← Plugins
</a>
<h1 className="mt-4 text-3xl font-medium tracking-tight">{plugin.name}</h1>
<p className="mt-3 text-lg leading-relaxed text-white/70">{plugin.description}</p>
<div className="mt-6">
<CodeBlock size="sm">{installCommand(plugin)}</CodeBlock>
</div>
<div className="mt-3 flex flex-wrap items-center gap-x-2 gap-y-2 text-xs text-extra-muted-foreground [&>*+*]:before:mr-2 [&>*+*]:before:content-['·'_/_'']">
<AuthorLink author={author} className={AUTHOR_LINK_CLASS}>
<AuthorAvatar author={author} size="xs" />
{author.name}
</AuthorLink>
{category && (
<a href={categoryHref(category.slug)} className={META_LINK_CLASS}>
{category.label}
</a>
)}
<InstallCount count={installs} />
<span className="font-mono">{pluginVersion(plugin)}</span>
<PluginContentLink href={plugin.repository.url} className={META_LINK_CLASS}>
Source
<a href="/plugins" className="text-sm text-muted-foreground hover:text-foreground">
← Plugins
</a>
<h1 className="mt-4 text-3xl font-medium tracking-tight">{plugin.name}</h1>
<p className="mt-3 text-lg leading-relaxed text-white/70">{plugin.description}</p>
<div className="mt-6">
<CodeBlock size="sm">{installCommand(plugin)}</CodeBlock>
</div>
<div className="mt-3 flex flex-wrap items-center gap-x-2 gap-y-2 text-xs text-extra-muted-foreground [&>*+*]:before:mr-2 [&>*+*]:before:content-['·'_/_'']">
<AuthorLink author={author} className={AUTHOR_LINK_CLASS}>
<AuthorAvatar author={author} size="xs" />
{author.name}
</AuthorLink>
{category && (
<a href={categoryHref(category.slug)} className={META_LINK_CLASS}>
{category.label}
</a>
)}
<InstallCount count={installs} />
<span className="font-mono">{pluginVersion(plugin)}</span>
<PluginContentLink href={plugin.repository.url} className={META_LINK_CLASS}>
Source
<ExternalLink className="h-3 w-3" />
</PluginContentLink>
{npm && (
<PluginContentLink href={npm} className={META_LINK_CLASS}>
npm
<ExternalLink className="h-3 w-3" />
</PluginContentLink>
{npm && (
<PluginContentLink href={npm} className={META_LINK_CLASS}>
npm
<ExternalLink className="h-3 w-3" />
</PluginContentLink>
)}
</div>
)}
</div>
<MediaGallery name={plugin.name} media={plugin.media} />
<MediaGallery name={plugin.name} media={plugin.media} />
<div className="mt-10 border-t border-white/10 pt-10">
<PluginOverview>{readmeBody(plugin.readme)}</PluginOverview>
</div>
<div className="mt-10 border-t border-white/10 pt-10">
<PluginOverview>{readmeBody(plugin.readme)}</PluginOverview>
</div>
</SiteShell>
);