fix(ui-tablemode): prevent small values from being cut off and remove…

… empty space at the bottom (#2321)

webapp/src/components/common/DataGrid.tsx

@@ -45,6 +45,9 @@ export interface DataGridProps extends Omit<DataEditorProps, "rowMarkers" | "gri
   enableColumnResize?: boolean;
 }
 
+const ROW_HEIGHT = 30;
+const OVERSCROLL = 2;
+
 function isStringRowMarkerOptions(
   rowMarkerOptions: RowMarkersOptions,
 ): rowMarkerOptions is StringRowMarkerOptions {
@@ -72,6 +75,11 @@ function DataGrid({
   const isStringRowMarkers = isStringRowMarkerOptions(rowMarkersOptions);
   const adjustedFreezeColumns = isStringRowMarkers ? (freezeColumns || 0) + 1 : freezeColumns;
 
+  // Manually calculate the height allows to remove the blank space at the bottom of the grid
+  // when there is no scrollbar. Header is included in the height calculation.
+  //! Group header is not included, fix it when needed.
+  const height = ROW_HEIGHT * (rows + 1) + OVERSCROLL;
+
   const [columns, setColumns] = useState(initColumns);
   const [gridSelection, setGridSelection] = useState<GridSelection>({
     rows: CompactSelection.empty(),
@@ -268,14 +276,15 @@ function DataGrid({
 
   return (
     <DataEditor
-      groupHeaderHeight={30}
-      headerHeight={30}
-      rowHeight={30}
+      groupHeaderHeight={ROW_HEIGHT}
+      headerHeight={ROW_HEIGHT}
+      rowHeight={ROW_HEIGHT}
       smoothScrollX
       smoothScrollY
-      overscrollX={2}
-      overscrollY={2}
+      overscrollX={OVERSCROLL}
+      overscrollY={OVERSCROLL}
       width="100%"
+      height={height}
       theme={darkTheme}
       {...rest}
       rows={rows}

webapp/src/components/common/DataGridForm.tsx

@@ -36,8 +36,8 @@ import useEnqueueErrorSnackbar from "@/hooks/useEnqueueErrorSnackbar";
 import useFormCloseProtection from "@/hooks/useCloseFormSecurity";
 import { useUpdateEffect } from "react-use";
 import { toError } from "@/utils/fnUtils";
-import { measureTextWidth } from "@/utils/domUtils";
 import useSafeMemo from "@/hooks/useSafeMemo";
+import { getColumnWidth } from "@/utils/dataGridUtils";
 
 type Data = Record<string, Record<string, string | boolean | number>>;
 
@@ -114,15 +114,9 @@ function DataGridForm<TData extends Data>({
     () =>
       columns.map((column) => ({
         ...column,
-        width:
-          "width" in column
-            ? column.width
-            : Math.max(
-                measureTextWidth(column.title),
-                ...rowNames.map((rowName) =>
-                  measureTextWidth(defaultData[rowName][column.id].toString()),
-                ),
-              ),
+        width: getColumnWidth(column, () =>
+          rowNames.map((rowName) => defaultData[rowName][column.id].toString()),
+        ),
       })),
     [columns, defaultData, rowNames],
   );
@@ -134,7 +128,7 @@ function DataGridForm<TData extends Data>({
       rowMarkersFromProps || {
         kind: "clickable-string",
         getTitle: (index) => rowNames[index],
-        width: Math.max(...rowNames.map((name) => measureTextWidth(name))),
+        width: getColumnWidth({ title: "", id: "" }, () => rowNames),
       },
     [rowMarkersFromProps, rowNames],
   );
@@ -311,7 +305,6 @@ function DataGridForm<TData extends Data>({
           mt: 1.5,
         }}
       >
-        <Divider flexItem />
         <Box sx={{ display: "flex" }}>
           <LoadingButton
             type="submit"

webapp/src/utils/dataGridUtils.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025, RTE (https://www.rte-france.com)
+ *
+ * See AUTHORS.txt
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This file is part of the Antares project.
+ */
+
+import type { GridColumn } from "@glideapps/glide-data-grid";
+import { measureTextWidth } from "./domUtils";
+
+/**
+ * Gets the width of the given column.
+ *
+ * @param column - The column to get the width of.
+ * @param values - The values of the column.
+ * @returns The width of the column.
+ */
+export function getColumnWidth(column: GridColumn, values: () => string[]) {
+  if ("width" in column) {
+    return column.width;
+  }
+
+  const width = Math.max(
+    measureTextWidth(column.title),
+    // `values` is a function to prevent unnecessary computation if the column already has a width
+    ...values().map((value) => measureTextWidth(value)),
+  );
+
+  // Under 110px, add a margin to the width to prevent text from being cut off
+  return width < 110 ? width + 15 : width;
+}