responsive task manager

src/router/Main.tsx

@@ -106,12 +106,17 @@ const MainRouter: FC = () => {
   const isWorkspace = pathname.startsWith(Pages.taskmanager.workspace);
 
   return (
-    <div className="p-4 overflow-hidden">
+    <div className={clx("overflow-hidden", isWorkspace ? "p-0 xl:p-4" : "p-4")}>
       {!isWorkspace && <SideBar />}
       <Header />
       <div className={clx("flex-1 mt-[68px] xl:mt-[81px]", !isWorkspace && "xl:ms-[269px]", !isWorkspace && hasSubMenu && "xl:ms-[305px]")}>
-        <div className={clx(`overflow-auto w-[${window.innerWidth}] h-[calc(100vh-113px)] flex flex-col`)}>
-          <div className="flex-1 min-h-0">
+        <div
+          className={clx(
+            "flex flex-col",
+            isWorkspace ? "h-[calc(100dvh-68px)] xl:h-[calc(100dvh-97px)] overflow-hidden" : "overflow-auto h-[calc(100vh-113px)]",
+          )}
+        >
+          <div className={clx("flex-1 min-h-0", isWorkspace && "overflow-hidden")}>
             <Routes>
               <Route path={Pages.dashboard} element={<Home />} />
               <Route path={Pages.services.mine} element={<MyServices />} />
@@ -215,10 +220,10 @@ const MainRouter: FC = () => {
               <Route path={Pages.taskmanager.projectList} element={<ProjectList />} />
             </Routes>
           </div>
-          <div className="h-20 shrink-0 xl:hidden" />
+          {!isWorkspace && <div className="h-20 shrink-0 xl:hidden" />}
         </div>
       </div>
-      <Footer />
+      {!isWorkspace && <Footer />}
     </div>
   );
 };