From 03947b05606257feaf0fc0b5f83291314914ae80 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 12 May 2023 01:23:31 +0530
Subject: [PATCH 1/2] fix: kanban board horizontal scroll

---
 .../core/board-view/single-board.tsx          | 104 +++++++++---------
 1 file changed, 53 insertions(+), 51 deletions(-)

diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index 5d33b15bfc5..cec5efc9070 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -66,45 +66,45 @@ export const SingleBoard: React.FC<Props> = ({
   }, [currentState]);
 
   return (
-    <div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96"}`}>
-      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
-        <BoardHeader
-          addIssueToState={addIssueToState}
-          currentState={currentState}
-          groupTitle={groupTitle}
-          isCollapsed={isCollapsed}
-          setIsCollapsed={setIsCollapsed}
-          isCompleted={isCompleted}
-        />
-        {isCollapsed && (
-          <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
-            {(provided, snapshot) => (
-              <div
-                className={`relative h-full overflow-y-auto p-1  ${
-                  snapshot.isDraggingOver ? "bg-brand-base/20" : ""
-                } ${!isCollapsed ? "hidden" : "block"}`}
-                ref={provided.innerRef}
-                {...provided.droppableProps}
-              >
-                {orderBy !== "sort_order" && (
-                  <>
-                    <div
-                      className={`absolute ${
-                        snapshot.isDraggingOver ? "block" : "hidden"
-                      } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`}
-                    />
-                    <div
-                      className={`absolute ${
-                        snapshot.isDraggingOver ? "block" : "hidden"
-                      } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`}
-                    >
-                      This board is ordered by{" "}
-                      {replaceUnderscoreIfSnakeCase(
-                        orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
-                      )}
-                    </div>
-                  </>
-                )}
+    <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
+      <BoardHeader
+        addIssueToState={addIssueToState}
+        currentState={currentState}
+        groupTitle={groupTitle}
+        isCollapsed={isCollapsed}
+        setIsCollapsed={setIsCollapsed}
+        isCompleted={isCompleted}
+      />
+      {isCollapsed && (
+        <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
+          {(provided, snapshot) => (
+            <div
+              className={`relative h-full ${snapshot.isDraggingOver ? "bg-brand-base/20" : ""} ${
+                !isCollapsed ? "hidden" : "flex flex-col"
+              }`}
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+            >
+              {orderBy !== "sort_order" && (
+                <>
+                  <div
+                    className={`absolute ${
+                      snapshot.isDraggingOver ? "block" : "hidden"
+                    } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`}
+                  />
+                  <div
+                    className={`absolute ${
+                      snapshot.isDraggingOver ? "block" : "hidden"
+                    } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`}
+                  >
+                    This board is ordered by{" "}
+                    {replaceUnderscoreIfSnakeCase(
+                      orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
+                    )}
+                  </div>
+                </>
+              )}
+              <div className="overflow-y-auto pt-3">
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}
@@ -139,17 +139,12 @@ export const SingleBoard: React.FC<Props> = ({
                     )}
                   </Draggable>
                 ))}
-                <span
-                  style={{
-                    display: orderBy === "sort_order" ? "inline" : "none",
-                  }}
-                >
-                  {provided.placeholder}
-                </span>
+              </div>
+              <div>
                 {type === "issue" ? (
                   <button
                     type="button"
-                    className="flex items-center gap-2 font-medium text-brand-accent outline-none"
+                    className="flex items-center gap-2 font-medium text-brand-accent outline-none p-1"
                     onClick={addIssueToState}
                   >
                     <PlusIcon className="h-4 w-4" />
@@ -182,10 +177,17 @@ export const SingleBoard: React.FC<Props> = ({
                   )
                 )}
               </div>
-            )}
-          </StrictModeDroppable>
-        )}
-      </div>
+              <span
+                style={{
+                  display: orderBy === "sort_order" ? "inline" : "none",
+                }}
+              >
+                {provided.placeholder}
+              </span>
+            </div>
+          )}
+        </StrictModeDroppable>
+      )}
     </div>
   );
 };

From 4070a915bd3948a324b9b5561bb471bc0eb05918 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 12 May 2023 02:06:39 +0530
Subject: [PATCH 2/2] chore: droppable placeholder position

---
 .../core/board-view/single-board.tsx          | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index cec5efc9070..d0fe1834acd 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -79,9 +79,9 @@ export const SingleBoard: React.FC<Props> = ({
         <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
           {(provided, snapshot) => (
             <div
-              className={`relative h-full ${snapshot.isDraggingOver ? "bg-brand-base/20" : ""} ${
-                !isCollapsed ? "hidden" : "flex flex-col"
-              }`}
+              className={`relative h-full ${
+                orderBy !== "sort_order" && snapshot.isDraggingOver ? "bg-brand-base/20" : ""
+              } ${!isCollapsed ? "hidden" : "flex flex-col"}`}
               ref={provided.innerRef}
               {...provided.droppableProps}
             >
@@ -139,6 +139,13 @@ export const SingleBoard: React.FC<Props> = ({
                     )}
                   </Draggable>
                 ))}
+                <span
+                  style={{
+                    display: orderBy === "sort_order" ? "inline" : "none",
+                  }}
+                >
+                  {provided.placeholder}
+                </span>
               </div>
               <div>
                 {type === "issue" ? (
@@ -177,13 +184,6 @@ export const SingleBoard: React.FC<Props> = ({
                   )
                 )}
               </div>
-              <span
-                style={{
-                  display: orderBy === "sort_order" ? "inline" : "none",
-                }}
-              >
-                {provided.placeholder}
-              </span>
             </div>
           )}
         </StrictModeDroppable>