fix(prices): disable width on autosized table

blockchain · May 18, 2022 · 6ca6ed8 · 6ca6ed8
1 parent 31d315d
commit 6ca6ed8
Showing 1 changed file with 11 additions and 17 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/template.success.tsx
@@ -6,7 +6,6 @@ import { FixedSizeList as List } from 'react-window'
 import styled from 'styled-components'
 
 import { CellText, HeaderText, HeaderToggle, TableWrapper } from 'components/Table'
-import { useElementSize } from 'hooks'
 
 import { Props as _P, SuccessStateType as _S } from '.'
 import { getTableColumns } from './Table'
@@ -20,6 +19,7 @@ const NoResultsWrapper = styled.div`
 
 export const TableBodyWrapper = styled.div`
   height: calc(100% - 52px);
+  flex: 1 1 auto;
 `
 
 const options = {
@@ -54,10 +54,6 @@ const PricesTable = (props: Props) => {
     []
   )
 
-  // react-virtualized-auto-sizer grows outside of page width bounds, grab parent table width
-  // and set that as width on AutoList's List child element
-  const [tableRef, { width: parentTableWidth }] = useElementSize()
-
   const {
     getTableBodyProps,
     getTableProps,
@@ -105,7 +101,7 @@ const PricesTable = (props: Props) => {
   )
 
   return (
-    <TableWrapper ref={tableRef}>
+    <TableWrapper>
       {state.globalFilter?.length && !rows.length ? (
         <NoResultsWrapper>
           <CellText color='grey900' size='18px'>
@@ -154,18 +150,16 @@ const PricesTable = (props: Props) => {
             })}
           </div>
           <TableBodyWrapper>
-            <AutoSizer>
+            <AutoSizer disableWidth>
               {({ height }) => (
-                <div {...getTableBodyProps()}>
-                  <List
-                    height={height}
-                    width={parentTableWidth}
-                    itemCount={rows.length}
-                    itemSize={90}
-                  >
-                    {RenderRow}
-                  </List>
-                </div>
+                <List
+                  height={height}
+                  itemCount={rows.length}
+                  itemSize={90}
+                  {...getTableBodyProps()}
+                >
+                  {RenderRow}
+                </List>
               )}
             </AutoSizer>
           </TableBodyWrapper>