Enhance TransactionsTable with custom cell renderers for description and recipient fields, and adjust row height for improved layout.

client/src/components/TransactionsTable.js

@@ -36,7 +36,8 @@ class TransactionsTable extends Component {
           width: 350,
           sortable: true,
           headerComponent: TextHeaderWithFilter,
-          tooltipField: 'description'
+          tooltipField: 'description',
+          cellRenderer: this.DescriptionRenderer
         },
         {
           headerName: 'Empfänger/Zahler',
@@ -44,7 +45,8 @@ class TransactionsTable extends Component {
           width: 200,
           sortable: true,
           headerComponent: TextHeaderWithFilter,
-          tooltipField: 'Beguenstigter/Zahlungspflichtiger'
+          tooltipField: 'Beguenstigter/Zahlungspflichtiger',
+          cellRenderer: this.RecipientRenderer
         },
         {
           headerName: 'Betrag',
@@ -156,7 +158,7 @@ class TransactionsTable extends Component {
         // Performance optimizations
         suppressChangeDetection: false,
         // Row height
-        rowHeight: 35,
+        rowHeight: 26,
         headerHeight: 40,
         // Pagination (optional - can be removed for infinite scrolling)
         pagination: false,
@@ -189,6 +191,22 @@ class TransactionsTable extends Component {
   };
 
   // Custom cell renderers as React components
+  DescriptionRenderer = (params) => {
+    return (
+      <span style={{ fontSize: '0.7rem', lineHeight: '1.2' }}>
+        {params.value}
+      </span>
+    );
+  };
+
+  RecipientRenderer = (params) => {
+    return (
+      <span style={{ fontSize: '0.7rem', lineHeight: '1.2' }}>
+        {params.value}
+      </span>
+    );
+  };
+
   AmountRenderer = (params) => {
     const amount = params.value;
     const color = amount >= 0 ? '#388e3c' : '#d32f2f';