[web-599] ui: kanban layout UI consistency enhancement for grouped display filters (#3841)

* ui: UI inconsistancy in kanban layout when we grouped and sub grouped display filters.

* ui: width update in the kanban block

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -291,27 +291,29 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               </Droppable>
             </div>
 
-            <KanBanView
+            <div className="w-max h-max">
-              issuesMap={issueMap}
+              <KanBanView
-              issueIds={issueIds}
+                issuesMap={issueMap}
-              displayProperties={displayProperties}
+                issueIds={issueIds}
-              sub_group_by={sub_group_by}
+                displayProperties={displayProperties}
-              group_by={group_by}
+                sub_group_by={sub_group_by}
-              handleIssues={handleIssues}
+                group_by={group_by}
-              quickActions={renderQuickActions}
+                handleIssues={handleIssues}
-              handleKanbanFilters={handleKanbanFilters}
+                quickActions={renderQuickActions}
-              kanbanFilters={kanbanFilters}
+                handleKanbanFilters={handleKanbanFilters}
-              enableQuickIssueCreate={enableQuickAdd}
+                kanbanFilters={kanbanFilters}
-              showEmptyGroup={userDisplayFilters?.show_empty_groups ?? true}
+                enableQuickIssueCreate={enableQuickAdd}
-              quickAddCallback={issues?.quickAddIssue}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups ?? true}
-              viewId={viewId}
+                quickAddCallback={issues?.quickAddIssue}
-              disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
+                viewId={viewId}
-              canEditProperties={canEditProperties}
+                disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
-              storeType={storeType}
+                canEditProperties={canEditProperties}
-              addIssuesToView={addIssuesToView}
+                storeType={storeType}
-              scrollableContainerRef={scrollableContainerRef}
+                addIssuesToView={addIssuesToView}
-              isDragStarted={isDragStarted}
+                scrollableContainerRef={scrollableContainerRef}
-            />
+                isDragStarted={isDragStarted}
+              />
+            </div>
           </DragDropContext>
         </div>
       </div>

web/components/issues/issue-layouts/kanban/block.tsx

@@ -141,7 +141,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
         >
           <div
             className={cn(
-              "rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
+              "rounded border-[0.5px] w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
               { "hover:cursor-grab": !isDragDisabled },
               { "border-custom-primary-100": snapshot.isDragging },
               { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }

web/components/issues/issue-layouts/kanban/default.tsx

@@ -107,14 +107,14 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
   const isGroupByCreatedBy = group_by === "created_by";
 
   return (
-    <div className={`relative w-full flex gap-3 ${sub_group_by ? "h-full" : "h-full"}`}>
+    <div className={`relative w-full flex gap-2 ${sub_group_by ? "h-full" : "h-full"}`}>
       {groupList &&
         groupList.length > 0 &&
         groupList.map((_list: IGroupByColumn) => {
           const groupByVisibilityToggle = visibilityGroupBy(_list);
 
           return (
-            <div className={`relative flex flex-shrink-0 flex-col group ${groupByVisibilityToggle ? `` : `w-[340px]`}`}>
+            <div className={`relative flex flex-shrink-0 flex-col group ${groupByVisibilityToggle ? `` : `w-[350px]`}`}>
               {sub_group_by === null && (
                 <div className="flex-shrink-0 sticky top-0 z-[2] w-full bg-custom-background-90 py-1">
                   <HeaderGroupByCard

web/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -123,9 +123,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
       <Droppable droppableId={`${groupId}__${sub_group_id}`}>
         {(provided: any, snapshot: any) => (
           <div
-            className={`relative h-full w-full transition-all ${
+            className={`relative h-full transition-all ${snapshot.isDraggingOver ? `bg-custom-background-80` : ``}`}
-              snapshot.isDraggingOver ? `bg-custom-background-80` : ``
-            }`}
             {...provided.droppableProps}
             ref={provided.innerRef}
           >

web/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -38,11 +38,11 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
   kanbanFilters,
   handleKanbanFilters,
 }) => (
-  <div className="relative flex h-max min-h-full w-full items-center">
+  <div className="relative flex gap-2 h-max min-h-full w-full items-center">
     {list &&
       list.length > 0 &&
       list.map((_list: IGroupByColumn) => (
-        <div key={`${sub_group_by}_${_list.id}`} className="flex w-[340px] flex-shrink-0 flex-col">
+        <div key={`${sub_group_by}_${_list.id}`} className="flex w-[350px] flex-shrink-0 flex-col">
           <HeaderGroupByCard
             sub_group_by={sub_group_by}
             group_by={group_by}