e6869c82cc
Some checks failed
Visual diff / Should run? (pull_request) Has been cancelled
CI / Lint (pull_request) Has been cancelled
CI / Schema map up to date (pull_request) Has been cancelled
CI / Forbidden patterns (9 checks) (pull_request) Has been cancelled
CI / Migrations apply (node-pg-migrate) (pull_request) Has been cancelled
CI / Unit tests (vitest) (pull_request) Has been cancelled
Convoy metrics gate / Require role-event telemetry on convoy PRs (pull_request) Has been cancelled
PR Health rollup / Aggregate gate status (pull_request) Has been cancelled
Preview smoke / Should run? (pull_request) Has been cancelled
Visual diff / Screenshot diff (pull_request) Has been cancelled
Preview smoke / Playwright smoke (pull_request) Has been cancelled
- styles/globals.css: add overflow-x: hidden + max-width: 100vw to body (global safety net) - components/CollectionPageView.js: flex-wrap filter row, responsive search width (w-full sm:w-64) - pages/my-cards.js: replace min-w-[200px] with w-full sm:min-w-[200px] on filter search - pages/designer.js: remove shrink-0 from live preview sidebar to allow flex collapse - components/DeckDetailView.js: add flex-wrap + gap to header flex row - components/CardItem.js: remove whitespace-nowrap from expanding add buttons (3 instances) - components/DashboardRecentActivity.js: whitespace-nowrap → whitespace-normal on timestamp - components/CollaboratorFacepile.js: tooltips use whitespace-normal + break-words + max-w - components/MobileNavigation.js: tooltip whitespace-nowrap → whitespace-normal Fixes horizontal scroll / layout breakage on mobile (<375px) across the site.
75 lines
2.3 KiB
JavaScript
75 lines
2.3 KiB
JavaScript
import Link from 'next/link';
|
|
import DeckDetailCardList from './DeckDetailCardList';
|
|
import DeckDetailStatsSidebar from './DeckDetailStatsSidebar';
|
|
import { Button } from './ui';
|
|
import { getDeckFormatIcon } from '../lib/deck-format-utils.js';
|
|
|
|
export default function DeckDetailView({
|
|
deck,
|
|
groupBy,
|
|
groupedCards,
|
|
isOwner,
|
|
setGroupBy,
|
|
stats,
|
|
}) {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div className="flex flex-wrap justify-between items-start mb-8 gap-3">
|
|
<div>
|
|
<div className="flex items-center space-x-3 mb-2">
|
|
<Link
|
|
href="/decks"
|
|
className="hover:underline"
|
|
style={{ color: 'var(--accent-ember)' }}
|
|
>
|
|
← Back to Decks
|
|
</Link>
|
|
</div>
|
|
<div className="flex items-center space-x-3 mb-2">
|
|
<span className="text-3xl">{getDeckFormatIcon(deck.format)}</span>
|
|
<h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
|
{deck.name}
|
|
</h1>
|
|
{deck.is_public && (
|
|
<span
|
|
className="px-2 py-1 rounded-full text-xs font-medium"
|
|
style={{
|
|
backgroundColor: 'var(--bg-tertiary)',
|
|
color: 'var(--accent-ember)',
|
|
}}
|
|
>
|
|
Public
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="mb-2" style={{ color: 'var(--text-secondary)' }}>
|
|
by {deck.creator_username} • {deck.format} • {stats.totalCards} cards
|
|
</p>
|
|
{deck.description && (
|
|
<p className="max-w-2xl" style={{ color: 'var(--text-secondary)' }}>
|
|
{deck.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{isOwner && (
|
|
<div className="flex space-x-3">
|
|
<Link href={`/deck-builder?deck=${deck.id}`}>
|
|
<Button variant="primary">Edit Deck</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
<DeckDetailStatsSidebar
|
|
deck={deck}
|
|
stats={stats}
|
|
groupBy={groupBy}
|
|
onGroupByChange={setGroupBy}
|
|
/>
|
|
<DeckDetailCardList cards={deck.cards} groupedCards={groupedCards} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|