From 33252f6c23d86d2608abfd980418389fb28697e8 Mon Sep 17 00:00:00 2001
From: maciek <maciek@vegaprotocol.io>
Date: Thu, 2 Mar 2023 17:32:30 +0100
Subject: [PATCH] chore: make footer lower buttons floating over table rows

---
 .../client-pages/portfolio/deposits-container.tsx     |  3 ++-
 .../client-pages/portfolio/withdrawals-container.tsx  |  5 +++--
 .../accounts-container/accounts-container.tsx         | 11 ++++++++---
 apps/trading/components/footer/footer.tsx             |  2 +-
 apps/trading/pages/_app.page.tsx                      |  2 +-
 libs/accounts/src/lib/accounts-manager.tsx            | 10 +++++++++-
 .../order-list-manager/order-list-manager.tsx         |  8 ++++----
 .../src/lib/components/order-list/order-list.tsx      |  5 ++---
 libs/ui-toolkit/.storybook/preview.js                 |  2 +-
 libs/withdraws/src/lib/withdrawals-table.tsx          |  3 +--
 10 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/apps/trading/client-pages/portfolio/deposits-container.tsx b/apps/trading/client-pages/portfolio/deposits-container.tsx
index 917d4da13..fbb2a6081 100644
--- a/apps/trading/client-pages/portfolio/deposits-container.tsx
+++ b/apps/trading/client-pages/portfolio/deposits-container.tsx
@@ -33,8 +33,9 @@ export const DepositsContainer = () => {
         </div>
       </div>
       {!isReadOnly && (
-        <div className="w-full dark:bg-black bg-white absolute bottom-0 h-auto flex justify-end px-[11px] py-2">
+        <div className="h-auto flex justify-end px-[11px] py-2 bottom-0 right-1 absolute dark:bg-black/75 bg-white/75 rounded">
           <Button
+            variant="primary"
             size="sm"
             onClick={() => openDepositDialog()}
             data-testid="deposit-button"
diff --git a/apps/trading/client-pages/portfolio/withdrawals-container.tsx b/apps/trading/client-pages/portfolio/withdrawals-container.tsx
index 13f7e48f9..388ba9ba2 100644
--- a/apps/trading/client-pages/portfolio/withdrawals-container.tsx
+++ b/apps/trading/client-pages/portfolio/withdrawals-container.tsx
@@ -20,7 +20,7 @@ export const WithdrawalsContainer = () => {
 
   return (
     <VegaWalletContainer>
-      <div className="h-full relative grid grid-rows-[1fr,min-content]">
+      <div className="h-full relative grid grid-rows-[1fr]">
         <div className="h-full relative">
           <WithdrawalsTable
             data-testid="withdrawals-history"
@@ -39,8 +39,9 @@ export const WithdrawalsContainer = () => {
           </div>
         </div>
         {!isReadOnly && (
-          <div className="w-full dark:bg-black bg-white absolute bottom-0 h-auto flex justify-end px-[11px] py-2">
+          <div className="h-auto flex justify-end px-[11px] py-2 bottom-0 right-1 absolute dark:bg-black/75 bg-white/75 rounded">
             <Button
+              variant="primary"
               size="sm"
               onClick={() => openWithdrawDialog()}
               data-testid="withdraw-dialog-button"
diff --git a/apps/trading/components/accounts-container/accounts-container.tsx b/apps/trading/components/accounts-container/accounts-container.tsx
index 95f9f9ae2..382a8f0c3 100644
--- a/apps/trading/components/accounts-container/accounts-container.tsx
+++ b/apps/trading/components/accounts-container/accounts-container.tsx
@@ -36,7 +36,7 @@ export const AccountsContainer = ({
   }
 
   return (
-    <div className="h-full relative grid grid-rows-[1fr,min-content]">
+    <div className="h-full relative grid grid-rows-[1fr]">
       <div>
         <AccountManager
           partyId={pubKey}
@@ -48,15 +48,20 @@ export const AccountsContainer = ({
         />
       </div>
       {!isReadOnly && (
-        <div className="flex gap-2 justify-end p-2 px-[11px]">
+        <div className="flex gap-2 justify-end p-2 px-[11px] fixed bottom-0 right-1 dark:bg-black/75 bg-white/75 rounded">
           <Button
+            variant="primary"
             size="sm"
             data-testid="open-transfer-dialog"
             onClick={() => openTransferDialog()}
           >
             {t('Transfer')}
           </Button>
-          <Button size="sm" onClick={() => openDepositDialog()}>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => openDepositDialog()}
+          >
             {t('Deposit')}
           </Button>
         </div>
diff --git a/apps/trading/components/footer/footer.tsx b/apps/trading/components/footer/footer.tsx
index 3484f5f28..77eba74f6 100644
--- a/apps/trading/components/footer/footer.tsx
+++ b/apps/trading/components/footer/footer.tsx
@@ -14,7 +14,7 @@ export const Footer = () => {
   const { blockDiff, datanodeBlockHeight } = useNodeHealth();
 
   return (
-    <footer className="px-4 py-1 text-xs border-t border-default text-vega-light-300 dark:text-vega-dark-300">
+    <footer className="px-4 py-1 text-xs border-t border-default text-vega-light-300 dark:text-vega-dark-300 fixed bottom-0 left-0 border-r bg-white dark:bg-black">
       {/* Pull left to align with top nav, due to button padding */}
       <div className="-ml-2">
         {VEGA_URL && (
diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx
index c55ee0b80..013ce58a4 100644
--- a/apps/trading/pages/_app.page.tsx
+++ b/apps/trading/pages/_app.page.tsx
@@ -72,7 +72,7 @@ function AppBody({ Component }: AppProps) {
 
   const gridClasses = classNames(
     'h-full relative z-0 grid',
-    'grid-rows-[repeat(3,min-content),1fr,min-content]'
+    'grid-rows-[repeat(3,min-content),1fr]'
   );
 
   return (
diff --git a/libs/accounts/src/lib/accounts-manager.tsx b/libs/accounts/src/lib/accounts-manager.tsx
index 32fe795ee..062814df9 100644
--- a/libs/accounts/src/lib/accounts-manager.tsx
+++ b/libs/accounts/src/lib/accounts-manager.tsx
@@ -1,8 +1,9 @@
+import { useRef, useMemo, memo, useCallback, useState, useEffect } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import type { GridReadyEvent } from 'ag-grid-community';
 import type { AgGridReact } from 'ag-grid-react';
-import { useRef, useMemo, memo } from 'react';
 import type { AccountFields } from './accounts-data-provider';
 import { aggregatedAccountsDataProvider } from './accounts-data-provider';
 import type { PinnedAsset } from './accounts-table';
@@ -35,6 +36,12 @@ export const AccountManager = ({
     dataProvider: aggregatedAccountsDataProvider,
     variables,
   });
+  const onGridReady = useCallback((params: GridReadyEvent) => {
+    gridRef.current?.api.sizeColumnsToFit();
+  }, []);
+  useEffect(() => {
+    gridRef.current?.api?.sizeColumnsToFit();
+  }, [data]);
   return (
     <div className="relative h-full">
       <AccountTable
@@ -46,6 +53,7 @@ export const AccountManager = ({
         isReadOnly={isReadOnly}
         noRowsOverlayComponent={() => null}
         pinnedAsset={pinnedAsset}
+        onGridReady={onGridReady}
       />
       <div className="pointer-events-none absolute inset-0">
         <AsyncRenderer
diff --git a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx
index 38583bdcb..2e624b0ae 100644
--- a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx
+++ b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx
@@ -133,8 +133,8 @@ export const OrderListManager = ({
 
   return (
     <>
-      <div className="h-full relative grid grid-rows-[1fr,min-content]">
-        <div className="relative">
+      <div className="h-full relative grid grid-rows-[1fr]">
+        <div className="h-full relative">
           <OrderListTable
             ref={gridRef}
             rowModelType="infinite"
@@ -155,7 +155,6 @@ export const OrderListManager = ({
             setEditOrder={setEditOrder}
             onMarketClick={onMarketClick}
             isReadOnly={isReadOnly}
-            hasActiveOrder={hasActiveOrder}
             blockLoadDebounceMillis={100}
             suppressLoadingOverlay
             suppressNoRowsOverlay
@@ -172,8 +171,9 @@ export const OrderListManager = ({
           </div>
         </div>
         {!isReadOnly && hasActiveOrder && (
-          <div className="w-full dark:bg-black bg-white absolute bottom-0 h-auto flex justify-end px-[11px] py-2">
+          <div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end px-[11px] py-2 absolute bottom-0 right-1 rounded">
             <Button
+              variant="primary"
               size="sm"
               onClick={() => {
                 create({
diff --git a/libs/orders/src/lib/components/order-list/order-list.tsx b/libs/orders/src/lib/components/order-list/order-list.tsx
index 4af68a4cb..6f62745ad 100644
--- a/libs/orders/src/lib/components/order-list/order-list.tsx
+++ b/libs/orders/src/lib/components/order-list/order-list.tsx
@@ -31,11 +31,10 @@ export type OrderListTableProps = OrderListProps & {
   setEditOrder: (order: Order) => void;
   onMarketClick?: (marketId: string) => void;
   isReadOnly: boolean;
-  hasActiveOrder?: boolean;
 };
 
 export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
-  ({ cancel, setEditOrder, onMarketClick, hasActiveOrder, ...props }, ref) => {
+  ({ cancel, setEditOrder, onMarketClick, ...props }, ref) => {
     return (
       <AgGrid
         ref={ref}
@@ -47,7 +46,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
         }}
         style={{
           width: '100%',
-          height: hasActiveOrder ? 'calc(100% - 46px)' : '100%',
+          height: '100%',
         }}
         getRowId={({ data }) => data.id}
         {...props}
diff --git a/libs/ui-toolkit/.storybook/preview.js b/libs/ui-toolkit/.storybook/preview.js
index c7f808a90..59e6d1d77 100644
--- a/libs/ui-toolkit/.storybook/preview.js
+++ b/libs/ui-toolkit/.storybook/preview.js
@@ -1,4 +1,4 @@
-import { useThemeSwitcher } from '@vegaprotocol/utils';
+import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import classNames from 'classnames';
 import { useEffect } from 'react';
 import '../src/styles.css';
diff --git a/libs/withdraws/src/lib/withdrawals-table.tsx b/libs/withdraws/src/lib/withdrawals-table.tsx
index 283794295..ebbfb4b2f 100644
--- a/libs/withdraws/src/lib/withdrawals-table.tsx
+++ b/libs/withdraws/src/lib/withdrawals-table.tsx
@@ -45,8 +45,7 @@ export const WithdrawalsTable = (
         EtherscanLinkCell,
         CompleteCell,
       }}
-      suppressCellFocus={true}
-      domLayout="autoHeight"
+      suppressCellFocus
       {...props}
     >
       <AgGridColumn headerName="Asset" field="asset.symbol" />