From b370ef72ee7e7dc5e8b4841faba2ccce004e6d1a Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Sun, 16 Mar 2025 23:50:04 +0530
Subject: [PATCH] [RANTS-46] fix: modules list sidebar position (#6754)

---
 .../components/modules/modules-list-view.tsx  | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/core/components/modules/modules-list-view.tsx b/web/core/components/modules/modules-list-view.tsx
index 4d8eac8d3c..1664772eef 100644
--- a/web/core/components/modules/modules-list-view.tsx
+++ b/web/core/components/modules/modules-list-view.tsx
@@ -90,20 +90,17 @@ export const ModulesListView: React.FC = observer(() => {
 
   return (
     <ContentWrapper variant={ERowVariant.HUGGING}>
-      {displayFilters?.layout === "list" && (
-        <div className="flex h-full w-full justify-between">
+      <div className="size-full flex justify-between">
+        {displayFilters?.layout === "list" && (
           <ListLayout>
             {filteredModuleIds.map((moduleId) => (
               <ModuleListItem key={moduleId} moduleId={moduleId} />
             ))}
           </ListLayout>
-          <ModulePeekOverview projectId={projectId?.toString() ?? ""} workspaceSlug={workspaceSlug?.toString() ?? ""} />
-        </div>
-      )}
-      {displayFilters?.layout === "board" && (
-        <Row className="flex h-full w-full justify-between py-page-y">
-          <div
-            className={`grid h-full w-full grid-cols-1 gap-6 overflow-y-auto ${
+        )}
+        {displayFilters?.layout === "board" && (
+          <Row
+            className={`size-full py-page-y grid grid-cols-1 gap-6 overflow-y-auto ${
               peekModule
                 ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
                 : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
@@ -112,11 +109,17 @@ export const ModulesListView: React.FC = observer(() => {
             {filteredModuleIds.map((moduleId) => (
               <ModuleCardItem key={moduleId} moduleId={moduleId} />
             ))}
+          </Row>
+        )}
+        {displayFilters?.layout === "gantt" && (
+          <div className="size-full overflow-hidden">
+            <ModulesListGanttChartView />
           </div>
+        )}
+        <div className="flex-shrink-0">
           <ModulePeekOverview projectId={projectId?.toString() ?? ""} workspaceSlug={workspaceSlug?.toString() ?? ""} />
-        </Row>
-      )}
-      {displayFilters?.layout === "gantt" && <ModulesListGanttChartView />}
+        </div>
+      </div>
     </ContentWrapper>
   );
 });