redesigned payment page + a lot of fixes

frontend/pweb/lib/pages/address_book/page/recipient/info_row.dart

@@ -34,6 +34,8 @@ class RecipientAddressBookInfoRow extends StatelessWidget {
     final style = textStyle ?? Theme.of(context).textTheme.bodySmall!;
 
     return Row(
+      mainAxisAlignment: MainAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Icon(iconForPaymentType(type), size: iconSize),
@@ -55,4 +57,4 @@ class RecipientAddressBookInfoRow extends StatelessWidget {
       ],
     );
   }
-}
+}

frontend/pweb/lib/pages/address_book/page/recipient/item.dart

@@ -59,6 +59,7 @@ class _RecipientAddressBookItemState extends State<RecipientAddressBookItem> {
           child: Padding(
             padding: widget.padding,
             child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Row(
                   children: [

frontend/pweb/lib/pages/address_book/page/recipient/payment_row.dart

@@ -29,12 +29,22 @@ class RecipientPaymentRow extends StatelessWidget {
       return const Center(child: CircularProgressIndicator());
     }
 
-    return Row(
-      spacing: spacing,
-      children: cacheProvider.methodsForRecipient(recipientId).map((m) => RecipientAddressBookInfoRow(
-        type: m.type,
-        value: getPaymentTypeDescription(context, m),
-      )).toList(),
+    return Align(
+      alignment: Alignment.centerLeft,
+      child: Wrap(
+        alignment: WrapAlignment.start,
+        runAlignment: WrapAlignment.start,
+        crossAxisAlignment: WrapCrossAlignment.start,
+        spacing: spacing,
+        runSpacing: spacing,
+        children: cacheProvider
+            .methodsForRecipient(recipientId)
+            .map((m) => RecipientAddressBookInfoRow(
+                  type: m.type,
+                  value: getPaymentTypeDescription(context, m),
+                ))
+            .toList(),
+      ),
     );
   }
 }