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]; const activeGroups = GROUPS[groupBy];
return ( 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 => { {activeGroups.map(category => {
const catCards = categorizedCards[category]; const catCards = categorizedCards[category];
if (catCards.length === 0) return null; 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') { if (viewMode === 'stack') {
return ( 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. {/* 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. */} For now, drag from StackView is not implemented, falling back to Click. */}
<StackView <StackView
@@ -820,7 +820,7 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
</div> </div>
<div className="flex-1 overflow-auto p-2 custom-scrollbar flex flex-col"> <div className="flex-1 overflow-auto p-2 custom-scrollbar flex flex-col">
{renderLandStation()} {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> </div>
</DroppableZone> </DroppableZone>
@@ -830,7 +830,7 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
<span>Library ({deck.length})</span> <span>Library ({deck.length})</span>
</div> </div>
<div className="flex-1 overflow-auto p-2 custom-scrollbar"> <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> </div>
</DroppableZone> </DroppableZone>
</div> </div>
@@ -847,7 +847,7 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
</div> </div>
<div className="flex-1 overflow-auto p-2 custom-scrollbar flex flex-col"> <div className="flex-1 overflow-auto p-2 custom-scrollbar flex flex-col">
{renderLandStation()} {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> </div>
</DroppableZone> </DroppableZone>
</div> </div>