Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

feat: enhance Potenziali component layout with ScrollArea and ScrollBar

Browse source
This commit is contained in:
Marco Pedone 2026-04-03 11:50:38 +02:00
parent a7f569dd90
commit 2acd6eca92
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/infoalloggi/src/components/area-riservata/potenziali.tsx
View file

@ -10,6 +10,7 @@ import {
KanbanHeader, KanbanHeader,
KanbanProvider, KanbanProvider,
} from "~/components/ui/kanban"; } from "~/components/ui/kanban";
import { ScrollArea, ScrollBar } from "~/components/ui/scroll-area";
import { usePotenziali } from "~/providers/PotenzialiProvider"; import { usePotenziali } from "~/providers/PotenzialiProvider";
import type { PotenzialiGroupsId } from "~/schemas/public/PotenzialiGroups"; import type { PotenzialiGroupsId } from "~/schemas/public/PotenzialiGroups";
import type { UsersId } from "~/schemas/public/Users"; import type { UsersId } from "~/schemas/public/Users";
@ -45,9 +46,9 @@ import { UserAvatar } from "../user_avatar";
export const Potenziali = () => { export const Potenziali = () => {
const { data, columns, setData, updateCall, removeColumn } = usePotenziali(); const { data, columns, setData, updateCall, removeColumn } = usePotenziali();
return ( return (
<> <ScrollArea className="w-screen pr-2 sm:w-full">
<KanbanProvider <KanbanProvider
className="w-max" className="mx-2 w-max"
columns={columns} columns={columns}
data={data} data={data}
onDataChange={setData} onDataChange={setData}
@ -57,7 +58,7 @@ export const Potenziali = () => {
> >
{(column) => ( {(column) => (
<KanbanBoard <KanbanBoard
className="w-fit overflow-auto" className="max-h-[82vh] w-69 overflow-auto sm:max-h-[88vh]"
id={column.id} id={column.id}
key={column.id} key={column.id}
> >
@ -83,7 +84,7 @@ export const Potenziali = () => {
</Confirm> </Confirm>
</div> </div>
</KanbanHeader> </KanbanHeader>
<KanbanCards className="w-68" id={column.id}> <KanbanCards className="mx-auto w-68" id={column.id}>
{(data: PotenzialeData) => ( {(data: PotenzialeData) => (
<PotenzialeCardItem <PotenzialeCardItem
columnId={column.id} columnId={column.id}
@ -95,7 +96,8 @@ export const Potenziali = () => {
</KanbanBoard> </KanbanBoard>
)} )}
</KanbanProvider> </KanbanProvider>
</> <ScrollBar orientation="horizontal" />
</ScrollArea>
); );
}; };
// 1. Extract the card logic into a separate component // 1. Extract the card logic into a separate component