fixes

actualbudget · Aug 26, 2024 · 6df0e6a · 6df0e6a
1 parent d489f62
commit 6df0e6a
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
@@ -962,7 +962,7 @@ const Transaction = memo(function Transaction({
   const { columnWidths, updateColumnWidth, resetColumnWidths } =
     useColumnWidth();
 
-  const sidebar = useLocalPref('sidebarWidth');
+  const [sidebarWidth] = useLocalPref('sidebarWidth');
 
   const checkColumnSizes = useCallback(() => {
     setTimeout(() => {
@@ -1122,6 +1122,8 @@ const Transaction = memo(function Transaction({
   const valueStyle = added ? { fontWeight: 600 } : null;
   const backgroundFocus = focusedField === 'select';
   const amountStyle = hideFraction ? { letterSpacing: -0.5 } : null;
+
+  const maxWidthDynamic = - 10 - Math.floor((445 + (showBalance ? 103 : 0) + (showCleared ? 38 : 0) + sidebarWidth) / 4);
 
   const runningBalance = !isTemporaryId(id)
     ? balance
@@ -1305,7 +1307,7 @@ const Transaction = memo(function Transaction({
             minWidth: columnWidths['account']
               ? `${columnWidths['account']}px`
               : 'auto',
-            maxWidth: `calc(25vw - 10px - ${Math.floor((445 + (showBalance ? 103 : 0) + (showCleared ? 38 : 0) + sidebar) / 4)}px)`,
+            maxWidth: `calc(25vw -${maxWidthDynamic}px)`,
           }}
           textAlign="flex"
           value={accountId}
@@ -1362,7 +1364,7 @@ const Transaction = memo(function Transaction({
               : null
           }
           style={{
-            maxWidth: `calc(25vw - 10px - ${Math.floor((445 + (showBalance ? 103 : 0) + (showCleared ? 38 : 0) + sidebar) / 4)}px)`,
+            maxWidth: `calc(25vw -${maxWidthDynamic}px)`,
           }}
           focused={focusedField === 'payee'}
           /* Filter out the account we're currently in as it is not a valid transfer */
@@ -1417,7 +1419,7 @@ const Transaction = memo(function Transaction({
             alignItems: 'center',
             justifyContent: 'flex-start',
             height: '100%',
-            maxWidth: `calc(25vw - 10px - ${Math.floor((445 + (showBalance ? 103 : 0) + (showCleared ? 38 : 0) + sidebar) / 4)}px)`,
+            maxWidth: `calc(25vw -${maxWidthDynamic}px)`,
           }}
           plain
         >
@@ -1525,7 +1527,7 @@ const Transaction = memo(function Transaction({
             fontStyle: 'italic',
             color: theme.pageTextSubdued,
             fontWeight: 300,
-            maxWidth: `calc(25vw - 10px - ${Math.floor((445 + (showBalance ? 103 : 0) + (showCleared ? 38 : 0) + sidebar) / 4)}px)`,
+            maxWidth: `calc(25vw -${maxWidthDynamic}px)`,
           }}
           inputProps={{
             readOnly: true,
@@ -1541,7 +1543,7 @@ const Transaction = memo(function Transaction({
           textAlign="flex"
           value={categoryId}
           style={{
-            maxWidth: `calc(25vw - 10px - ${Math.floor((445 + (showBalance ? 103 : 0) + (showCleared ? 38 : 0) + sidebar) / 4)}px)`,
+            maxWidth: `calc(25vw -${maxWidthDynamic}px)`,
           }}
           formatter={value =>
             value