Fixed scroll issue in shifting in facilities.

.gitattributes

@@ -1 +1,14 @@
-* text=auto
+scroll-bar
+* text=auto
+
+
+*.c text
+*.h text
+
+*.sln text eol=crlf
+
+*.png binary
+*.jpg binary
+
+* text=auto
+develop

package.json

@@ -64,6 +64,7 @@
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.4",

src/CAREUI/display/ScrollableColumn.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface ScrollableColumnProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const ScrollableColumn: React.FC<ScrollableColumnProps> = ({
+  title,
+  children,
+}) => {
+  return (
+    <div className="border border-gray-300 m-2">
+      <h3 className="text-lg font-semibold">{title}</h3>
+      <ScrollArea className="h-[400px] overflow-hidden">
+        <div className="flex flex-col">{children}</div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default ScrollableColumn;

src/components/Kanban/Board.tsx

@@ -29,15 +29,14 @@ interface KanbanBoardProps<T extends { id: string }> {
   }[];
   itemRender: (item: T) => ReactNode;
 }
-
 export default function KanbanBoard<T extends { id: string }>(
   props: KanbanBoardProps<T>,
 ) {
   const board = useRef<HTMLDivElement>(null);
 
   return (
     <div className="h-[calc(100vh-114px)] md:h-[calc(100vh-50px)]">
-      <div className="flex flex-col items-end justify-between md:flex-row">
+      <div className="flex flex-col items-center justify-between md:flex-row">
         <div>{props.title}</div>
         <div className="flex items-center gap-2 py-2">
           {[0, 1].map((button, i) => (
@@ -56,8 +55,9 @@ export default function KanbanBoard<T extends { id: string }>(
           ))}
         </div>
       </div>
+
       <DragDropContext onDragEnd={props.onDragEnd}>
-        <div className="h-full overflow-scroll" ref={board}>
+        <div className="h-full overflow-x-auto overflow-y-hidden" ref={board}>
           <div className="flex items-stretch px-0 pb-2">
             {props.sections.map((section, i) => (
               <KanbanSection<T>
@@ -73,7 +73,6 @@ export default function KanbanBoard<T extends { id: string }>(
     </div>
   );
 }
-
 export function KanbanSection<T extends { id: string }>(
   props: Omit<KanbanBoardProps<T>, "sections" | "onDragEnd"> & {
     section: KanbanBoardProps<T>["sections"][number];
@@ -92,8 +91,6 @@ export function KanbanSection<T extends { id: string }>(
   const defaultLimit = 14;
   const { t } = useTranslation();
 
-  // should be replaced with useInfiniteQuery when we move over to react query
-
   const fetchNextPage = async (refresh: boolean = false) => {
     if (!refresh && (fetchingNextPage || !hasMore)) return;
     if (refresh) setPages([]);
@@ -121,7 +118,6 @@ export function KanbanSection<T extends { id: string }>(
       const sectionElementHeight =
         sectionRef.current?.getBoundingClientRect().height;
       const scrolled = props.boardRef.current?.scrollTop;
-      // if user has scrolled 3/4th of the current items
       if (
         scrolled &&
         sectionElementHeight &&
@@ -130,7 +126,6 @@ export function KanbanSection<T extends { id: string }>(
         fetchNextPage();
       }
     };
-
     props.boardRef.current?.addEventListener("scroll", onBoardReachEnd);
     return () =>
       props.boardRef.current?.removeEventListener("scroll", onBoardReachEnd);
@@ -139,15 +134,12 @@ export function KanbanSection<T extends { id: string }>(
   useEffect(() => {
     fetchNextPage(true);
   }, [props.section]);
-
   return (
     <Droppable droppableId={section.id}>
       {(provided) => (
         <div
           ref={provided.innerRef}
-          className={
-            "relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
-          }
+          className="relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
         >
           <div className="sticky top-0 rounded-xl bg-secondary-200 pt-2">
             <div className="mx-2 flex items-center justify-between rounded-lg border border-secondary-300 bg-white p-4">
@@ -159,7 +151,10 @@ export function KanbanSection<T extends { id: string }>(
               </div>
             </div>
           </div>
-          <div ref={sectionRef}>
+          <div
+            ref={sectionRef}
+            className="h-[calc(100vh-180px)] overflow-y-auto"
+          >
             {!fetchingNextPage && totalCount === 0 && (
               <div className="flex items-center justify-center py-10 text-secondary-500">
                 {t("no_results_found")}
@@ -190,5 +185,4 @@ export function KanbanSection<T extends { id: string }>(
     </Droppable>
   );
 }
-
 export type KanbanBoardType = typeof KanbanBoard;