Two line cell

src/components/TimeLeaveModal/TimeLeaveInputTable.tsx

@@ -6,6 +6,7 @@ import {
   GridCellParams,
   GridColDef,
   GridEditInputCell,
+  GridRenderCellParams,
   GridRenderEditCellParams,
   GridRowId,
   GridRowModel,
@@ -45,6 +46,7 @@ import { roundToNearestQuarter } from "@/app/utils/manhourUtils";
 import FastTimeEntryModal from "../TimesheetTable/FastTimeEntryModal";
 import { LeaveType } from "@/app/api/timesheets";
 import DisabledEdit from "./DisabledEdit";
+import TwoLineCell from "./TwoLineCell";
 
 dayjs.extend(isBetween);
 
@@ -325,6 +327,9 @@ const TimeLeaveInputTable: React.FC<Props> = ({
             return leave?.name || "Unknown leave";
           }
         },
+        renderCell(params: GridRenderCellParams<TimeLeaveRow, number>) {
+          return <TwoLineCell>{params.formattedValue}</TwoLineCell>;
+        },
         renderEditCell(params: GridRenderEditCellParams<TimeLeaveRow, number>) {
           return (
             <ProjectSelect
@@ -455,6 +460,9 @@ const TimeLeaveInputTable: React.FC<Props> = ({
             );
           }
         },
+        renderCell(params: GridRenderCellParams<TimeLeaveRow, number>) {
+          return <TwoLineCell>{params.formattedValue}</TwoLineCell>;
+        },
       },
       {
         field: "taskId",
@@ -496,6 +504,9 @@ const TimeLeaveInputTable: React.FC<Props> = ({
           ).find((t) => t.id === params.value);
           return task ? task.name : t("None");
         },
+        renderCell(params: GridRenderCellParams<TimeLeaveRow, number>) {
+          return <TwoLineCell>{params.formattedValue}</TwoLineCell>;
+        },
       },
       {
         field: "inputHours",
@@ -578,6 +589,9 @@ const TimeLeaveInputTable: React.FC<Props> = ({
             content
           );
         },
+        renderCell(params: GridRenderCellParams<TimeLeaveRow>) {
+          return <TwoLineCell>{params.value}</TwoLineCell>;
+        },
       },
     ],
     [

src/components/TimeLeaveModal/TwoLineCell.tsx

@@ -0,0 +1,24 @@
+import { Box, Tooltip } from "@mui/material";
+import React from "react";
+
+const TwoLineCell: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <Tooltip title={children}>
+      <Box
+        sx={{
+          whiteSpace: "normal",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          lineHeight: "22px",
+        }}
+      >
+        {children}
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default TwoLineCell;