Merge pull request #374 from qa-guru/QAGDEV-716

QAGDEV-716 - Детализация заданий не занимает весь фрейм

Author: nik1999777

src/features/kanban/constants.ts

@@ -16,11 +16,6 @@ export const STANDARD_QUERY_DEFAULTS = {
   LIMIT: 100,
 };
 
-export const UI_CONSTANTS = {
-  MIN_COLUMN_WIDTH: "65%",
-  MAX_COLUMN_WIDTH: "100%",
-};
-
 export const ROUTES = {
   KANBAN: "/kanban",
 };

src/features/kanban/views/board/board.styled.ts

@@ -1,17 +1,14 @@
 import { Box, Button, Stack, StepLabel, Stepper } from "@mui/material";
 import { styled } from "@mui/system";
 
-import { UI_CONSTANTS } from "../../constants";
-
-interface IColumnBox {
-  showHomeworkDetails: boolean;
-  isUpLg: boolean;
-}
-
-export const StyledWrapper = styled(Box)({
-  display: "flex",
-  minWidth: "100%",
-});
+export const StyledWrapper = styled(Box)<{ showHomeworkDetails: boolean }>(
+  ({ showHomeworkDetails }) => ({
+    display: "grid",
+    gridTemplateColumns: showHomeworkDetails ? "65% 1fr" : "100%",
+    width: "100%",
+    height: "100vh",
+  })
+);
 
 export const StyledStack = styled(Stack)(({ theme }) => ({
   flexDirection: "row",
@@ -52,12 +49,7 @@ export const StyledStepperButton = styled(Button)({
   minWidth: "5px",
 });
 
-export const StyledColumnBox = styled(Box, {
-  shouldForwardProp: (prop) =>
-    !["showHomeworkDetails", "isUpLg"].includes(prop as string),
-})<IColumnBox>(({ showHomeworkDetails, isUpLg }) => ({
-  width:
-    showHomeworkDetails && isUpLg
-      ? UI_CONSTANTS.MIN_COLUMN_WIDTH
-      : UI_CONSTANTS.MAX_COLUMN_WIDTH,
-}));
+export const StyledColumnBox = styled(Box)({
+  height: "100%",
+  overflow: "auto",
+});

src/features/kanban/views/desktop-board/desktop-board.tsx

@@ -64,10 +64,10 @@ const DesktopBoard: FC<IDesktopBoard> = ({
     );
 
   return (
-    <StyledWrapper>
+    <StyledWrapper showHomeworkDetails={showHomeworkDetails}>
       <StyledColumnBox
-        showHomeworkDetails={showHomeworkDetails}
-        isUpLg={isLargeDesktop}
+      // showHomeworkDetails={showHomeworkDetails}
+      // isUpLg={isLargeDesktop}
       >
         <StyledStack>
           {columns?.map((column, index) => (

src/features/kanban/views/homework-details/homework-details.styled.tsx

@@ -10,17 +10,18 @@ import {
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
 export const StyledHomeworkDetails = styled(Box)(({ theme }) => ({
-  position: "relative",
-  maxWidth: "33vw",
+  height: "100%",
+  overflowY: "auto",
   backgroundColor: alpha(theme.palette.app.secondary, 0.2),
-  marginLeft: "10px",
+  display: "flex",
+  flexDirection: "column",
+  marginTop: "15px",
 }));
 
 export const StyledBox = styled(Box)(({ theme }) => ({
-  marginTop: "20px",
   padding: "35px 25px",
-  maxHeight: "calc(100vh - 217px)",
-  overflowY: "scroll",
+  overflowY: "auto",
+  flex: 1,
   backgroundColor: theme.palette.app.lightGrey,
 }));