Fix order table

frontend/src/components/BookTable/index.tsx

@@ -168,11 +168,11 @@ const BookTable = ({
     };
   }, []);
 
-  const robotSmallObj = useCallback((width: number) => {
+  const robotSmallObj = useCallback(() => {
     return {
       field: 'maker_nick',
       headerName: t('Robot'),
-      width: width * fontSize,
+      flex: 1,
       renderCell: (params: { row: PublicOrder }) => {
         const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias);
         const thirdParty = thirdParties[params.row.coordinatorShortAlias];
@@ -202,12 +202,11 @@ const BookTable = ({
     };
   }, []);
 
-  const typeObj = useCallback(
+  const typeObj = useCallback(() => {
-    (width: number) => {
     return {
       field: 'type',
       headerName: t('Is'),
-        width: width * fontSize,
+      flex: 1,
       renderCell: (params: { row: PublicOrder }) => {
         return (
           <div
@@ -223,23 +222,18 @@ const BookTable = ({
         );
       },
     };
-    },
+  }, [fav.mode]);
-    [fav.mode],
-  );
 
-  const amountObj = useCallback(
+  const amountObj = useCallback(() => {
-    (width: number) => {
     return {
       field: 'amount',
       headerName: t('Amount'),
       type: 'number',
-        width: width * fontSize,
+      flex: 1.5,
       renderCell: (params: { row: PublicOrder }) => {
         const amount = fav.mode === 'swap' ? params.row.amount * 100 : params.row.amount;
-          const minAmount =
+        const minAmount = fav.mode === 'swap' ? params.row.min_amount * 100 : params.row.min_amount;
-            fav.mode === 'swap' ? params.row.min_amount * 100 : params.row.min_amount;
+        const maxAmount = fav.mode === 'swap' ? params.row.max_amount * 100 : params.row.max_amount;
-          const maxAmount =
-            fav.mode === 'swap' ? params.row.max_amount * 100 : params.row.max_amount;
         return (
           <div
             style={{ cursor: 'pointer' }}
@@ -253,15 +247,13 @@ const BookTable = ({
         );
       },
     };
-    },
+  }, [fav.mode]);
-    [fav.mode],
-  );
 
-  const currencyObj = useCallback((width: number) => {
+  const currencyObj = useCallback(() => {
     return {
       field: 'currency',
       headerName: t('Currency'),
-      width: width * fontSize,
+      flex: 1,
       renderCell: (params: { row: PublicOrder }) => {
         const currencyCode = String(currencyDict[params.row.currency.toString()]);
         return (
@@ -286,12 +278,11 @@ const BookTable = ({
     };
   }, []);
 
-  const paymentObj = useCallback(
+  const paymentObj = useCallback(() => {
-    (width: number) => {
     return {
       field: 'payment_method',
       headerName: fav.mode === 'fiat' ? t('Payment Method') : t('Destination'),
-        width: width * fontSize,
+      flex: 2,
       renderCell: (params: { row: PublicOrder }) => {
         return (
           <div
@@ -312,15 +303,13 @@ const BookTable = ({
         );
       },
     };
-    },
+  }, [fav.mode]);
-    [fav.mode],
-  );
 
-  const paymentSmallObj = useCallback((width: number) => {
+  const paymentSmallObj = useCallback(() => {
     return {
       field: 'payment_method',
       headerName: t('Pay'),
-      width: width * fontSize,
+      flex: 1,
       renderCell: (params: { row: PublicOrder }) => {
         return (
           <div
@@ -346,12 +335,12 @@ const BookTable = ({
     };
   }, []);
 
-  const priceObj = useCallback((width: number) => {
+  const priceObj = useCallback(() => {
     return {
       field: 'price',
       headerName: t('Price'),
       type: 'number',
-      width: width * fontSize,
+      flex: 2,
       renderCell: (params: { row: PublicOrder }) => {
         const currencyCode = String(currencyDict[params.row.currency.toString()]);
         const coordinator =
@@ -379,8 +368,7 @@ const BookTable = ({
     };
   }, []);
 
-  const premiumObj = useCallback(
+  const premiumObj = useCallback(() => {
-    (width: number) => {
     // coloring premium texts based on 4 params:
     // Hardcoded: a sell order at 0% is an outstanding premium
     // Hardcoded: a buy order at 10% is an outstanding premium
@@ -390,7 +378,7 @@ const BookTable = ({
       field: 'premium',
       headerName: t('Premium'),
       type: 'number',
-        width: width * fontSize,
+      flex: 1,
       renderCell: (params: { row: PublicOrder }) => {
         const currencyCode = String(currencyDict[params.row.currency.toString()]);
         let fontColor = `rgb(0,0,0)`;
@@ -433,16 +421,14 @@ const BookTable = ({
         );
       },
     };
-    },
+  }, [theme]);
-    [theme],
-  );
 
-  const timerObj = useCallback((width: number) => {
+  const timerObj = useCallback(() => {
     return {
       field: 'escrow_duration',
       headerName: t('Timer'),
       type: 'number',
-      width: width * fontSize,
+      flex: 1,
       renderCell: (params: { row: PublicOrder }) => {
         const hours = Math.round(params.row.escrow_duration / 3600);
         const minutes = Math.round((params.row.escrow_duration - hours * 3600) / 60);
@@ -460,12 +446,12 @@ const BookTable = ({
     };
   }, []);
 
-  const expiryObj = useCallback((width: number) => {
+  const expiryObj = useCallback(() => {
     return {
       field: 'expires_at',
       headerName: t('Expiry'),
       type: 'string',
-      width: width * fontSize,
+      flex: 1,
       renderCell: (params: { row: PublicOrder }) => {
         const expiresAt: Date = new Date(params.row.expires_at);
         const timeToExpiry: number = Math.abs(expiresAt - new Date());
@@ -508,12 +494,12 @@ const BookTable = ({
     };
   }, []);
 
-  const satoshisObj = useCallback((width: number) => {
+  const satoshisObj = useCallback(() => {
     return {
       field: 'satoshis_now',
       headerName: t('Sats now'),
       type: 'number',
-      width: width * fontSize,
+      flex: 1,
       renderCell: (params: { row: PublicOrder }) => {
         const coordinator =
           federation.getCoordinator(params.row.coordinatorShortAlias) ??