diff --git a/src/frontend/src/components/dynamicLineClampComponent/index.tsx b/src/frontend/src/components/dynamicLineClampComponent/index.tsx deleted file mode 100644 index 11af51e0b..000000000 --- a/src/frontend/src/components/dynamicLineClampComponent/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { useEffect, useRef, useState } from "react"; -import { cn } from "../../utils/utils"; - -const DynamicLineClamp = ({ children, initial, className }) => { - const [lineClamp, setLineClamp] = useState(initial); - const parentRef = useRef(null); - - useEffect(() => { - const updateLineClamp = () => { - if (parentRef.current) { - const parentHeight = parentRef.current.clientHeight; - const lineHeight = parseFloat( - getComputedStyle(parentRef.current).lineHeight, - ); - const lines = Math.floor(parentHeight / lineHeight); - setLineClamp(lines); - } - }; - - updateLineClamp(); - window.addEventListener("resize", updateLineClamp); - - return () => { - window.removeEventListener("resize", updateLineClamp); - }; - }, []); - - return ( -
- - {children} - -
- ); -}; - -export default DynamicLineClamp; diff --git a/src/frontend/src/components/tableComponent/components/tableMultilineCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableMultilineCellRender/index.tsx deleted file mode 100644 index 27e1fc180..000000000 --- a/src/frontend/src/components/tableComponent/components/tableMultilineCellRender/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { CustomCellRendererProps } from "ag-grid-react"; - -export default function TableMultilineCellRender({ - value, -}: CustomCellRendererProps) { - return ( - - {value} - - ); -} diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx index f351475df..6e3f24278 100644 --- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx +++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx @@ -27,7 +27,7 @@ const useColumnDefs = ( }, tooltipField: "display_name", tooltipComponent: TableTooltipRender, - cellRenderer: TableMultilineCellRender, + wrapText: true, autoHeight: true, flex: 1, resizable: false, @@ -38,7 +38,7 @@ const useColumnDefs = ( field: "info", tooltipField: "info", tooltipComponent: TableTooltipRender, - cellRenderer: TableMultilineCellRender, + wrapText: true, autoHeight: true, flex: 2, resizable: false, diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css index ab031629a..08226b832 100644 --- a/src/frontend/src/style/classes.css +++ b/src/frontend/src/style/classes.css @@ -103,6 +103,10 @@ select:-webkit-autofill:focus { .ag-row .ag-cell { display: flex; - justify-content: center; /* align horizontal */ align-items: center; } +.ag-cell { + line-height: 1.25rem; + padding-top: 0.675rem; + padding-bottom: 0.675rem; +}