services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enable horizontal scrolling for StackView and use local card width in DeckBuilderView.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-18 02:27:49 +01:00
parent bd33f6be24
commit b7e0d1479c
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/src/components/StackView.tsx
View File

@@ -107,7 +107,7 @@ export const StackView: React.FC<StackViewProps> = ({ cards, cardWidth = 150, on
const activeGroups = GROUPS[groupBy];
return (
<div className="flex flex-row gap-4 overflow-x-auto pb-8 snap-x items-start">
<div className="inline-flex flex-row gap-4 pb-8 items-start min-w-full">
{activeGroups.map(category => {
const catCards = categorizedCards[category];
if (catCards.length === 0) return null;

8
src/client/src/modules/draft/DeckBuilderView.tsx
View File

@@ -161,7 +161,7 @@ const CardsDisplay: React.FC<{
if (viewMode === 'stack') {
return (
<div className="w-full h-full"> {/* Allow native scrolling from parent */}
<div className="h-full min-w-full w-max"> {/* Allow native scrolling from parent */}
{/* StackView doesn't support DnD yet, so we disable it or handle it differently.
For now, drag from StackView is not implemented, falling back to Click. */}
<StackView
@@ -820,7 +820,7 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
</div>
<div className="flex-1 overflow-auto p-2 custom-scrollbar flex flex-col">
{renderLandStation()}
<CardsDisplay cards={pool} viewMode={viewMode} cardWidth={cardWidth} onCardClick={addToDeck} onHover={setHoveredCard} emptyMessage="Pool Empty" source="pool" groupBy={groupBy} />
<CardsDisplay cards={pool} viewMode={viewMode} cardWidth={localCardWidth} onCardClick={addToDeck} onHover={setHoveredCard} emptyMessage="Pool Empty" source="pool" groupBy={groupBy} />
</div>
</DroppableZone>
@@ -830,7 +830,7 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
<span>Library ({deck.length})</span>
</div>
<div className="flex-1 overflow-auto p-2 custom-scrollbar">
<CardsDisplay cards={deck} viewMode={viewMode} cardWidth={cardWidth} onCardClick={removeFromDeck} onHover={setHoveredCard} emptyMessage="Your Library is Empty" source="deck" groupBy={groupBy} />
<CardsDisplay cards={deck} viewMode={viewMode} cardWidth={localCardWidth} onCardClick={removeFromDeck} onHover={setHoveredCard} emptyMessage="Your Library is Empty" source="deck" groupBy={groupBy} />
</div>
</DroppableZone>
</div>
@@ -847,7 +847,7 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
</div>
<div className="flex-1 overflow-auto p-2 custom-scrollbar flex flex-col">
{renderLandStation()}
<CardsDisplay cards={pool} viewMode={viewMode} cardWidth={cardWidth} onCardClick={addToDeck} onHover={setHoveredCard} emptyMessage="Pool Empty" source="pool" groupBy={groupBy} />
<CardsDisplay cards={pool} viewMode={viewMode} cardWidth={localCardWidth} onCardClick={addToDeck} onHover={setHoveredCard} emptyMessage="Pool Empty" source="pool" groupBy={groupBy} />
</div>
</DroppableZone>
</div>