feat: enhance Potenziali component layout with ScrollArea and ScrollBar

apps/infoalloggi/src/components/area-riservata/potenziali.tsx

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