From ceedb4be05465a34d5a8051c8f30d578be1fd7af Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 23 Jul 2026 14:51:45 +0000
Subject: [PATCH] Move paid badge outside the summary card, not just below the
 last row inside it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous placement put it as one more row inside summaryBox, right after Gesamt — the user wanted it visually below/outside the tinted card entirely. Now a sibling of summaryBox instead of a child, verified by rendering to PDF.
---
 src/invoicePdf.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/invoicePdf.tsx b/src/invoicePdf.tsx
index 68504d9..52bb4a6 100644
--- a/src/invoicePdf.tsx
+++ b/src/invoicePdf.tsx
@@ -82,9 +82,14 @@ const styles = StyleSheet.create({
   grandTotalRow: { flexDirection: "row", justifyContent: "space-between", paddingTop: 8, marginTop: 6, borderTopWidth: 1, borderTopColor: BORDER },
   grandTotalLabel: { fontSize: 12, fontFamily: "Helvetica-Bold" },
   grandTotalValue: { fontSize: 12, fontFamily: "Helvetica-Bold" },
-  // Moved here (below Gesamt) from the top meta row — reads more naturally
-  // right next to the amount it's confirming was paid, and keeps the meta
-  // row itself to just the three reference numbers.
+  // Moved here (below the summary card) from the top meta row — reads more
+  // naturally right next to the amount it's confirming was paid, and keeps
+  // the meta row itself to just the three reference numbers. Deliberately
+  // a *sibling* of summaryBox, not a row inside it — the badge confirms
+  // the whole card's total, so it sits visually outside/below the card
+  // rather than being absorbed as one more line inside it (a correction
+  // made after initially placing it inside the card — see this package's
+  // README/the e-invoicing memory notes if this needs revisiting again).
   paidBadgeRow: { alignItems: "flex-end", marginTop: 10 },
   // `fixed` (below, on the element) + absolute positioning — always pinned
   // to the bottom of the page regardless of how much content is above it,
@@ -354,14 +359,14 @@ export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller
                 <Text style={styles.grandTotalLabel}>Gesamt</Text>
                 <Text style={styles.grandTotalValue}>{formatPrice(order.total)}</Text>
               </View>
-              {paid && (
-                <View style={styles.paidBadgeRow}>
-                  <View style={styles.paidBadge}>
-                    <Text style={styles.paidBadgeText}>✓ Bereits beglichen ({order.paymentMethodTitle})</Text>
-                  </View>
-                </View>
-              )}
             </View>
+            {paid && (
+              <View style={styles.paidBadgeRow}>
+                <View style={styles.paidBadge}>
+                  <Text style={styles.paidBadgeText}>✓ Bereits beglichen ({order.paymentMethodTitle})</Text>
+                </View>
+              </View>
+            )}
           </View>
         </View>