fix(trading): make grids more responsive - suppress sizeColumnsToFit on small screens (#3906)

apps/trading/client-pages/markets/closed.tsx

@@ -315,6 +315,7 @@ const ClosedMarketsDataGrid = ({ rowData }: { rowData: Row[] }) => {
       getRowId={({ data }) => data.id}
       defaultColDef={{
         resizable: true,
+        minWidth: 100,
       }}
       overlayNoRowsTemplate="No data"
       storeKey="closedMarkets"

libs/datagrid/src/lib/ag-grid/use-column-sizes.spec.ts

@@ -6,6 +6,7 @@ import type {
 } from 'ag-grid-community';
 import { renderHook, act, waitFor } from '@testing-library/react';
 import { useColumnSizes } from './use-column-sizes';
+import * as reactHelpers from '@vegaprotocol/react-helpers';
 
 const mockApis = {
   api: {
@@ -49,6 +50,9 @@ describe('UseColumnSizes hook', () => {
   });
 
   it('onGridSizeChanged should call setSize', async () => {
+    jest
+      .spyOn(reactHelpers, 'useScreenDimensions')
+      .mockReturnValue({ screenSize: 'xxl' });
     const { result } = renderHook(() =>
       useColumnSizes({ storeKey, props: {} })
     );
@@ -95,6 +99,7 @@ describe('UseColumnSizes hook', () => {
 
   it('onGridReady should call setSizes', async () => {
     const props = { onGridReady: jest.fn() };
+
     const { result } = renderHook(() => useColumnSizes({ storeKey, props }));
     const obTest = { cool: 1, ...mockApis };
     await act(() => {

libs/datagrid/src/lib/ag-grid/use-column-sizes.ts

@@ -8,6 +8,7 @@ import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
 const STORAGE_KEY = 'vega_columns_sizes_store';
 
@@ -93,11 +94,12 @@ export const useColumnSizes = ({
     },
     [valueSetter, storeKey, parentOnColumnResized]
   );
-
+  const { screenSize } = useScreenDimensions();
+  const largeScreen = ['xl', 'xxl', 'xxxl'].includes(screenSize);
   const setSizes = useCallback(
     (apiEvent: GridReadyEvent | GridSizeChangedEvent) => {
       if (!storeKey || !Object.keys(sizes).length || !widthRef.current) {
-        apiEvent?.api.sizeColumnsToFit();
+        largeScreen && apiEvent?.api.sizeColumnsToFit();
       } else {
         const recalculatedSizes = recalculateSizes(sizes);
         const newSizes = Object.entries(recalculatedSizes).map(
@@ -109,7 +111,7 @@ export const useColumnSizes = ({
         apiEvent.columnApi.setColumnWidths(newSizes);
       }
     },
-    [storeKey, recalculateSizes, sizes]
+    [storeKey, recalculateSizes, sizes, largeScreen]
   );
 
   const onGridReady = useCallback(

libs/markets/src/lib/components/markets-container/market-list-table.tsx

@@ -68,6 +68,7 @@ export const MarketListTable = forwardRef<
         sortable: true,
         filter: true,
         filterParams: { buttons: ['reset'] },
+        minWidth: 100,
       }}
       suppressCellFocus
       components={{ PriceFlashCell, MarketName }}

libs/proposals/src/components/proposals-list/use-column-defs.tsx

@@ -156,6 +156,7 @@ export const useColumnDefs = () => {
       resizable: true,
       filter: true,
       filterParams: { buttons: ['reset'] },
+      minWidth: 100,
     };
   }, []);