Fix running balances thick header. (#3082)

* Update running balances width to display large numbers.

* add release note

* update width

* update width

* Fix running balances thick header.

* add release note

* fix alignment

* fix lint

* dont make header clickable

* refactor so HeaderCell can be unclickable

packages/desktop-client/src/components/transactions/TransactionsTable.jsx

@@ -293,8 +293,15 @@ const TransactionHeader = memo(
             onSort('deposit', selectAscDesc(field, ascDesc, 'deposit', 'desc'))
           }
         />
-        {showBalance && <Cell value="Balance" width={103} textAlign="right" />}
-
+        {showBalance && (
+          <HeaderCell
+            value="Balance"
+            width={103}
+            alignItems="flex-end"
+            marginRight={-5}
+            id="balance"
+          />
+        )}
         {showCleared && (
           <HeaderCell
             value="✓"
@@ -438,6 +445,16 @@ function HeaderCell({
   icon,
   onClick,
 }) {
+  const style = {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    color: theme.tableHeaderText,
+    fontWeight: 300,
+    marginLeft,
+    marginRight,
+  };
+
   return (
     <CustomCell
       width={width}
@@ -448,29 +465,21 @@ function HeaderCell({
         borderTopWidth: 0,
         borderBottomWidth: 0,
       }}
-      unexposedContent={({ value: cellValue }) => (
-        <Button
-          type="bare"
-          onClick={onClick}
-          style={{
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            color: theme.tableHeaderText,
-            fontWeight: 300,
-            marginLeft,
-            marginRight,
-          }}
-        >
-          <UnexposedCellContent value={cellValue} />
-          {icon === 'asc' && (
-            <SvgArrowDown width={10} height={10} style={{ marginLeft: 5 }} />
-          )}
-          {icon === 'desc' && (
-            <SvgArrowUp width={10} height={10} style={{ marginLeft: 5 }} />
-          )}
-        </Button>
-      )}
+      unexposedContent={({ value: cellValue }) =>
+        onClick ? (
+          <Button type="bare" onClick={onClick} style={style}>
+            <UnexposedCellContent value={cellValue} />
+            {icon === 'asc' && (
+              <SvgArrowDown width={10} height={10} style={{ marginLeft: 5 }} />
+            )}
+            {icon === 'desc' && (
+              <SvgArrowUp width={10} height={10} style={{ marginLeft: 5 }} />
+            )}
+          </Button>
+        ) : (
+          <Text style={style}>{cellValue}</Text>
+        )
+      }
     />
   );
 }

upcoming-release-notes/3082.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [psybers]
+---
+
+Fix running balances thick header.