[WEB-1093] chore: padding and borders consistency (#4315)

* chore: global list layout and list item component added * chore: project view list layout consistency * chore: project view sub header consistency * chore: pages list layout consistency * chore: project view sub header improvement * chore: list layout item component improvement * chore: module list layout consistency * chore: cycle list layout consistency * chore: issue list layout consistency * chore: header height consistency * chore: sub header consistency * chore: list layout improvement * chore: inbox sidebar improvement * fix: cycle quick action * chore: inbox selected issue improvement * chore: label option removed from pages filter * chore: inbox create issue modal improvement
2024-04-30 17:21:24 +05:30 · 2024-04-30 17:21:24 +05:30 · 87a606446f
commit 87a606446f
parent 1b79517f07
34 changed files with 1230 additions and 1081 deletions
--- a/web/components/modules/index.ts
+++ b/web/components/modules/index.ts
@ -12,6 +12,8 @@ export * from "./module-card-item";
 export * from "./module-list-item";
 export * from "./module-peek-overview";
 export * from "./quick-actions";
+export * from "./module-list-item-action";
+export * from "./module-view-header";

 // archived modules
 export * from "./archived-modules";
--- a/web/components/modules/module-list-item-action.tsx
+++ b/web/components/modules/module-list-item-action.tsx
@ -0,0 +1,168 @@
+import React, { FC } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+// icons
+import { User2 } from "lucide-react";
+// types
+import { IModule } from "@plane/types";
+// ui
+import { Avatar, AvatarGroup, Tooltip, setPromiseToast } from "@plane/ui";
+// components
+import { FavoriteStar } from "@/components/core";
+import { ModuleQuickActions } from "@/components/modules";
+// constants
+import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
+import { MODULE_STATUS } from "@/constants/module";
+import { EUserProjectRoles } from "@/constants/project";
+// helpers
+import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
+import { useEventTracker, useMember, useModule, useUser } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  moduleId: string;
+  moduleDetails: IModule;
+  isArchived: boolean;
+};
+
+export const ModuleListItemAction: FC<Props> = observer((props) => {
+  const { moduleId, moduleDetails, isArchived } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  //   store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+  const { addModuleToFavorites, removeModuleFromFavorites } = useModule();
+  const { getUserDetails } = useMember();
+  const { captureEvent } = useEventTracker();
+  const { isMobile } = usePlatformOS();
+
+  // derived values
+  const endDate = getDate(moduleDetails.target_date);
+  const startDate = getDate(moduleDetails.start_date);
+
+  const renderDate = moduleDetails.start_date || moduleDetails.target_date;
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+
+  // handlers
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then(
+      () => {
+        captureEvent(MODULE_FAVORITED, {
+          module_id: moduleId,
+          element: "Grid layout",
+          state: "SUCCESS",
+        });
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding module to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module added to favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the module to favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const removeFromFavoritePromise = removeModuleFromFavorites(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      moduleId
+    ).then(() => {
+      captureEvent(MODULE_UNFAVORITED, {
+        module_id: moduleId,
+        element: "Grid layout",
+        state: "SUCCESS",
+      });
+    });
+
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing module from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the module from favorites. Please try again.",
+      },
+    });
+  };
+
+  return (
+    <>
+      {moduleStatus && (
+        <span
+          className="flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
+          style={{
+            color: moduleStatus.color,
+            backgroundColor: `${moduleStatus.color}20`,
+          }}
+        >
+          {moduleStatus.label}
+        </span>
+      )}
+
+      {renderDate && (
+        <span className=" text-xs text-custom-text-300">
+          {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+        </span>
+      )}
+
+      <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`} isMobile={isMobile}>
+        <div className="flex w-10 cursor-default items-center justify-center gap-1">
+          {moduleDetails.member_ids.length > 0 ? (
+            <AvatarGroup showTooltip={false}>
+              {moduleDetails.member_ids.map((member_id) => {
+                const member = getUserDetails(member_id);
+                return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+              })}
+            </AvatarGroup>
+          ) : (
+            <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+              <User2 className="h-4 w-4 text-custom-text-400" />
+            </span>
+          )}
+        </div>
+      </Tooltip>
+
+      {isEditingAllowed && !isArchived && (
+        <FavoriteStar
+          onClick={(e) => {
+            if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+            else handleAddToFavorites(e);
+          }}
+          selected={moduleDetails.is_favorite}
+        />
+      )}
+      {workspaceSlug && projectId && (
+        <ModuleQuickActions
+          moduleId={moduleId}
+          projectId={projectId.toString()}
+          workspaceSlug={workspaceSlug.toString()}
+          isArchived={isArchived}
+        />
+      )}
+    </>
+  );
+});
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@ -1,21 +1,15 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import Link from "next/link";
 import { useRouter } from "next/router";
-import { Check, Info, User2 } from "lucide-react";
+// icons
+import { Check, Info } from "lucide-react";
 // ui
-import { Avatar, AvatarGroup, CircularProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
+import { CircularProgressIndicator } from "@plane/ui";
 // components
-import { FavoriteStar } from "@/components/core";
-import { ModuleQuickActions } from "@/components/modules";
-// constants
-import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
-import { MODULE_STATUS } from "@/constants/module";
-import { EUserProjectRoles } from "@/constants/project";
-// helpers
-import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
+import { ListItem } from "@/components/core/list";
+import { ModuleListItemAction } from "@/components/modules";
 // hooks
-import { useModule, useUser, useEventTracker, useMember } from "@/hooks/store";
+import { useModule } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";

 type Props = {
@ -27,76 +21,24 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
  const { moduleId, isArchived = false } = props;
  // router
  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
  // store hooks
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
-  const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
-  const { getUserDetails } = useMember();
-  const { captureEvent } = useEventTracker();
+  const { getModuleById } = useModule();
+  const { isMobile } = usePlatformOS();
+
  // derived values
  const moduleDetails = getModuleById(moduleId);
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-  const { isMobile } = usePlatformOS();
-  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!workspaceSlug || !projectId) return;

-    const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then(
-      () => {
-        captureEvent(MODULE_FAVORITED, {
-          module_id: moduleId,
-          element: "Grid layout",
-          state: "SUCCESS",
-        });
-      }
-    );
+  if (!moduleDetails) return null;

-    setPromiseToast(addToFavoritePromise, {
-      loading: "Adding module to favorites...",
-      success: {
-        title: "Success!",
-        message: () => "Module added to favorites.",
-      },
-      error: {
-        title: "Error!",
-        message: () => "Couldn't add the module to favorites. Please try again.",
-      },
-    });
-  };
+  const completionPercentage =
+    ((moduleDetails.completed_issues + moduleDetails.cancelled_issues) / moduleDetails.total_issues) * 100;

-  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!workspaceSlug || !projectId) return;
+  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);

-    const removeFromFavoritePromise = removeModuleFromFavorites(
-      workspaceSlug.toString(),
-      projectId.toString(),
-      moduleId
-    ).then(() => {
-      captureEvent(MODULE_UNFAVORITED, {
-        module_id: moduleId,
-        element: "Grid layout",
-        state: "SUCCESS",
-      });
-    });
-
-    setPromiseToast(removeFromFavoritePromise, {
-      loading: "Removing module from favorites...",
-      success: {
-        title: "Success!",
-        message: () => "Module removed from favorites.",
-      },
-      error: {
-        title: "Error!",
-        message: () => "Couldn't remove the module from favorites. Please try again.",
-      },
-    });
-  };
+  const completedModuleCheck = moduleDetails.status === "completed";

+  // handlers
  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
    e.stopPropagation();
    e.preventDefault();
@ -116,126 +58,42 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
    }
  };

-  if (!moduleDetails) return null;
-
-  const completionPercentage =
-    ((moduleDetails.completed_issues + moduleDetails.cancelled_issues) / moduleDetails.total_issues) * 100;
-
-  const endDate = getDate(moduleDetails.target_date);
-  const startDate = getDate(moduleDetails.start_date);
-
-  const renderDate = moduleDetails.start_date || moduleDetails.target_date;
-
-  // const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
-
-  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
-
-  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
-
-  const completedModuleCheck = moduleDetails.status === "completed";
-
  return (
-    <div className="relative">
-      <Link
-        href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
-        onClick={(e) => {
-          if (isArchived) {
-            openModuleOverview(e);
-          }
-        }}
-      >
-        <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 sm:flex-row">
-          <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
-            <div className="relative flex w-full items-center gap-3 overflow-hidden">
-              <div className="flex items-center gap-4 truncate">
-                <span className="flex-shrink-0">
-                  <CircularProgressIndicator size={38} percentage={progress}>
-                    {completedModuleCheck ? (
-                      progress === 100 ? (
-                        <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                      ) : (
-                        <span className="text-sm text-custom-primary-100">{`!`}</span>
-                      )
-                    ) : progress === 100 ? (
-                      <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                    ) : (
-                      <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
-                    )}
-                  </CircularProgressIndicator>
-                </span>
-                <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
-                  <span className="truncate text-base font-medium">{moduleDetails.name}</span>
-                </Tooltip>
-              </div>
-              <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
-                <Info className="h-4 w-4 text-custom-text-400" />
-              </button>
-            </div>
-          </div>
-          <span className="h-6 w-52 flex-shrink-0" />
-        </div>
-      </Link>
-      <div className="absolute right-5 bottom-8 flex items-center gap-1.5">
-        <div className="flex flex-shrink-0 items-center justify-center">
-          {moduleStatus && (
-            <span
-              className="flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
-              style={{
-                color: moduleStatus.color,
-                backgroundColor: `${moduleStatus.color}20`,
-              }}
-            >
-              {moduleStatus.label}
-            </span>
+    <ListItem
+      title={moduleDetails?.name ?? ""}
+      itemLink={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
+      onItemClick={(e) => {
+        if (isArchived) {
+          openModuleOverview(e);
+        }
+      }}
+      prependTitleElement={
+        <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
+          {completedModuleCheck ? (
+            progress === 100 ? (
+              <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+            ) : (
+              <span className="text-sm text-custom-primary-100">{`!`}</span>
+            )
+          ) : progress === 100 ? (
+            <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+          ) : (
+            <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
          )}
-        </div>
-        <div className="relative flex w-full items-center justify-between gap-2.5 sm:w-auto sm:flex-shrink-0 sm:justify-end ">
-          <div className="text-xs text-custom-text-300">
-            {renderDate && (
-              <span className=" text-xs text-custom-text-300">
-                {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-              </span>
-            )}
-          </div>
-
-          <div className="relative flex flex-shrink-0 items-center gap-3">
-            <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`} isMobile={isMobile}>
-              <div className="flex w-10 cursor-default items-center justify-center gap-1">
-                {moduleDetails.member_ids.length > 0 ? (
-                  <AvatarGroup showTooltip={false}>
-                    {moduleDetails.member_ids.map((member_id) => {
-                      const member = getUserDetails(member_id);
-                      return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                    })}
-                  </AvatarGroup>
-                ) : (
-                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                    <User2 className="h-4 w-4 text-custom-text-400" />
-                  </span>
-                )}
-              </div>
-            </Tooltip>
-
-            {isEditingAllowed && !isArchived && (
-              <FavoriteStar
-                onClick={(e) => {
-                  if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
-                  else handleAddToFavorites(e);
-                }}
-                selected={moduleDetails.is_favorite}
-              />
-            )}
-            {workspaceSlug && projectId && (
-              <ModuleQuickActions
-                moduleId={moduleId}
-                projectId={projectId.toString()}
-                workspaceSlug={workspaceSlug.toString()}
-                isArchived={isArchived}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
+        </CircularProgressIndicator>
+      }
+      appendTitleElement={
+        <button
+          onClick={openModuleOverview}
+          className={`z-[5] flex-shrink-0 ${isMobile ? "flex" : "hidden group-hover:flex"}`}
+        >
+          <Info className="h-4 w-4 text-custom-text-400" />
+        </button>
+      }
+      actionableItems={
+        <ModuleListItemAction moduleId={moduleId} moduleDetails={moduleDetails} isArchived={isArchived} />
+      }
+      isMobile={isMobile}
+    />
  );
 });
--- a/web/components/modules/module-view-header.tsx
+++ b/web/components/modules/module-view-header.tsx
@ -0,0 +1,178 @@
+import React, { FC, useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+import { ListFilter, Search, X } from "lucide-react";
+import { cn } from "@plane/editor-core";
+// types
+import { TModuleFilters } from "@plane/types";
+// ui
+import { Tooltip } from "@plane/ui";
+// components
+import { FiltersDropdown } from "@/components/issues";
+import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules/dropdowns";
+// constants
+import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
+// hooks
+import { useMember, useModuleFilter } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+export const ModuleViewHeader: FC = observer(() => {
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // router
+  const router = useRouter();
+  const { projectId } = router.query;
+
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  // store hooks
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  const {
+    currentProjectDisplayFilters: displayFilters,
+    currentProjectFilters: filters,
+    searchQuery,
+    updateDisplayFilters,
+    updateFilters,
+    updateSearchQuery,
+  } = useModuleFilter();
+
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
+
+  // handlers
+  const handleFilters = useCallback(
+    (key: keyof TModuleFilters, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = filters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else {
+        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues });
+    },
+    [filters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+  return (
+    <div className="hidden h-full sm:flex items-center gap-3 self-end">
+      <div className="flex items-center">
+        {!isSearchOpen && (
+          <button
+            type="button"
+            className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+          >
+            <Search className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <div
+          className={cn(
+            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            {
+              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <Search className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            placeholder="Search"
+            value={searchQuery}
+            onChange={(e) => updateSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                // updateSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      <ModuleOrderByDropdown
+        value={displayFilters?.order_by}
+        onChange={(val) => {
+          if (!projectId || val === displayFilters?.order_by) return;
+          updateDisplayFilters(projectId.toString(), {
+            order_by: val,
+          });
+        }}
+      />
+      <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
+        <ModuleFiltersSelection
+          displayFilters={displayFilters ?? {}}
+          filters={filters ?? {}}
+          handleDisplayFiltersUpdate={(val) => {
+            if (!projectId) return;
+            updateDisplayFilters(projectId.toString(), val);
+          }}
+          handleFiltersUpdate={handleFilters}
+          memberIds={workspaceMemberIds ?? undefined}
+        />
+      </FiltersDropdown>
+      <div className="hidden md:flex items-center gap-1 rounded bg-custom-background-80 p-1">
+        {MODULE_VIEW_LAYOUTS.map((layout) => (
+          <Tooltip key={layout.key} tooltipContent={layout.title} isMobile={isMobile}>
+            <button
+              type="button"
+              className={cn(
+                "group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100",
+                {
+                  "bg-custom-background-100 shadow-custom-shadow-2xs": displayFilters?.layout === layout.key,
+                }
+              )}
+              onClick={() => {
+                if (!projectId) return;
+                updateDisplayFilters(projectId.toString(), { layout: layout.key });
+              }}
+            >
+              <layout.icon
+                strokeWidth={2}
+                className={cn("h-3.5 w-3.5 text-custom-text-200", {
+                  "text-custom-text-100": displayFilters?.layout === layout.key,
+                })}
+              />
+            </button>
+          </Tooltip>
+        ))}
+      </div>
+    </div>
+  );
+});
--- a/web/components/modules/modules-list-view.tsx
+++ b/web/components/modules/modules-list-view.tsx
@ -2,6 +2,7 @@ import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useRouter } from "next/router";
 // components
+import { ListLayout } from "@/components/core/list";
 import { EmptyState } from "@/components/empty-state";
 import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules";
 import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "@/components/ui";
@ -69,11 +70,11 @@ export const ModulesListView: React.FC = observer(() => {
      {displayFilters?.layout === "list" && (
        <div className="h-full overflow-y-auto">
          <div className="flex h-full w-full justify-between">
-            <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
+            <ListLayout>
              {filteredModuleIds.map((moduleId) => (
                <ModuleListItem key={moduleId} moduleId={moduleId} />
              ))}
-            </div>
+            </ListLayout>
            <ModulePeekOverview
              projectId={projectId?.toString() ?? ""}
              workspaceSlug={workspaceSlug?.toString() ?? ""}