From babd99088dd6e392bc453a42f54c69198ea47c8f Mon Sep 17 00:00:00 2001
From: Maciek <maciek@vegaprotocol.io>
Date: Tue, 23 May 2023 18:08:55 +0200
Subject: [PATCH] fix(trading): make grids more responsive - suppress
 sizeColumnsToFit on small screens (#3906)

---
 apps/trading/client-pages/markets/closed.tsx              | 1 +
 libs/datagrid/src/lib/ag-grid/use-column-sizes.spec.ts    | 5 +++++
 libs/datagrid/src/lib/ag-grid/use-column-sizes.ts         | 8 +++++---
 .../components/markets-container/market-list-table.tsx    | 1 +
 .../src/components/proposals-list/use-column-defs.tsx     | 1 +
 5 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/trading/client-pages/markets/closed.tsx b/apps/trading/client-pages/markets/closed.tsx
index 487703abd..88cfe3508 100644
--- a/apps/trading/client-pages/markets/closed.tsx
+++ b/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"
diff --git a/libs/datagrid/src/lib/ag-grid/use-column-sizes.spec.ts b/libs/datagrid/src/lib/ag-grid/use-column-sizes.spec.ts
index 5c0916d20..3399df88e 100644
--- a/libs/datagrid/src/lib/ag-grid/use-column-sizes.spec.ts
+++ b/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(() => {
diff --git a/libs/datagrid/src/lib/ag-grid/use-column-sizes.ts b/libs/datagrid/src/lib/ag-grid/use-column-sizes.ts
index c364a3a74..aaa06d816 100644
--- a/libs/datagrid/src/lib/ag-grid/use-column-sizes.ts
+++ b/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(
diff --git a/libs/markets/src/lib/components/markets-container/market-list-table.tsx b/libs/markets/src/lib/components/markets-container/market-list-table.tsx
index 94e696f5f..a52738894 100644
--- a/libs/markets/src/lib/components/markets-container/market-list-table.tsx
+++ b/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 }}
diff --git a/libs/proposals/src/components/proposals-list/use-column-defs.tsx b/libs/proposals/src/components/proposals-list/use-column-defs.tsx
index 826e3a11b..1b86e7ebd 100644
--- a/libs/proposals/src/components/proposals-list/use-column-defs.tsx
+++ b/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,
     };
   }, []);