[priority: medium] AttunementsTab: Remove scrollable view, use natural page scroll instead #181

New Issue

2026-05-28T11:39:14+02:00

Anexim commented

2026-05-28 11:39:14 +02:00

Description

The AttunementsTab renders attunement cards inside a <ScrollArea> with a hard-coded 600px height, creating nested scroll contexts (page scroll + inner scroll). This makes scrolling through attunements buggy and unpredictable.

Current Implementation

File: src/components/game/tabs/AttunementsTab.tsx lines 184–192:

<ScrollArea className="h-[600px] pr-2">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    {allDefs.map((def) => (
      <AttunementCard key={def.id} def={def} state={attunements[def.id]} />
    ))}
  </div>
</ScrollArea>

Fix

Remove the <ScrollArea> wrapper entirely and let the card grid flow naturally in the page layout. The grid <div> should be rendered directly, and the natural page scroll handles overflow.

Affected Files

src/components/game/tabs/AttunementsTab.tsx — lines 184–192 (remove ScrollArea), line 10 (remove import)

## Description The AttunementsTab renders attunement cards inside a `<ScrollArea>` with a hard-coded 600px height, creating nested scroll contexts (page scroll + inner scroll). This makes scrolling through attunements buggy and unpredictable. ## Current Implementation File: `src/components/game/tabs/AttunementsTab.tsx` lines 184–192: ```tsx <ScrollArea className="h-[600px] pr-2"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> {allDefs.map((def) => ( <AttunementCard key={def.id} def={def} state={attunements[def.id]} /> ))} </div> </ScrollArea> ``` ## Fix Remove the `<ScrollArea>` wrapper entirely and let the card grid flow naturally in the page layout. The grid `<div>` should be rendered directly, and the natural page scroll handles overflow. ## Affected Files - `src/components/game/tabs/AttunementsTab.tsx` — lines 184–192 (remove ScrollArea), line 10 (remove import)

Anexim added the ai:todo label 2026-05-28 11:39:14 +02:00

n8n-gitea was assigned by Anexim

2026-05-28 11:39:14 +02:00

Anexim commented

2026-05-28 13:55:04 +02:00

Starting work on all 3 AttunementsTab issues (#181, #182, #183). Beginning with #181: removing ScrollArea wrapper.

Anexim closed this issue

2026-05-28 14:53:29 +02:00

Anexim commented

2026-05-28 14:53:29 +02:00

Removed ScrollArea wrapper from AttunementsTab. Cards now flow naturally in the page layout using the grid div directly. No more nested scroll contexts.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#181